組件
vue中使用component來表示組件誓军，通過封裝組件，我們可以將代碼最大程度的復(fù)用面睛，可以說組件是vue中的核心。
通信交互
定義了組件之后尊搬，我們需要使用它叁鉴，一般情況我們都是通過在vue中使用compoment方法來引入它，當(dāng)然有時候也會使用vue.use來引入組件佛寿。
組件交互分為兩種亲茅，一種是父組件的信息傳遞給子組件，一種是子組件的信息傳遞給父組件狗准。
- 父傳子
父類組件的信息傳遞給子組件是通過props來傳遞的。
<!--父組件-->
<template>
<div id="app">
<child-compoment :data="data"></child-compoment>
</div>
</template>
<script>
import child-compoment from './components/children.vue'
export default {
name: 'App',
components: {
child-compoment
},
data:function(){
return {
data:"hello world"
}
}
</script>
<!--子組件-->
<template>
<div class="content">
{{data}}
</div>
</template>
<script>
export default{
name : "child-compoment",
props:{
data:String
}
}
</script>
- 子傳父
子組件傳遞消息給父組件是通過emit有兩個參數(shù)茵肃，一個是event,一個是param,也就是說傳遞是通過事件進行傳遞的腔长。
<!--父組件-->
<template>
<div id="app">
<children-compoment @jump="getinfo"></children-compoment>
<p>
{{msg}}
</p>
</div>
</template>
<script>
import child-compoment from './components/children.vue'
export default {
name: 'App',
components: {
"child-compoment"
},
data:function{
return{
msg : ""
}
}
methods:{
getinfo:function(value){
this.msg = value
}
}
</script>
<!--子組件-->
<template>
<div class="content">
<button @click="jump">
點我傳值
</button>
</div>
</template>
<script>
export default{
name:"children-compoment",
methods:{
click:function(){
this.$emit('jump',"傳遞的值")
}
}
}
</script>
