我們使用vue開發時，往往需要提取公共組件，並且封裝組件，因此需要實現父子組件之間相互通信，傳遞事件發送消息。
1、父組件向子組件傳遞數據（prop）
父組件向子組件傳遞數據我們需要用到prop，我們可以通過prop向子組件傳遞數據，數據類型可以是string、number、boolean、array、object，子組件可以通過props獲取到父組件穿的的數據，進行一些操作或者直接渲染，同時prop可以傳遞動態或者靜態的數據。
父組件App.vue代碼：
<template>
<div id="app">
<child-node title="靜態數據1" :activeData="plugdatas"></child-node>
</div>
</template>
<script>
import ChildNode from './components/ChildNode'
export default {
name: 'App',
data(){
return{
plugdatas:"動態傳遞的數據2",
}
},
components:{
ChildNode
},
methods:{
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
子組件ChildNode.vue代碼
<template>
<div>
<div>靜態數據：{{title}}</div>
<div>動態數據：{{activeData}}</div>
</div>
</template>
<script>
export default {
name:"ChildNode",
props:["title","activeData"]
}
</script>
<style>
</style>
單向數據流
所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外改變父級組件的狀態，從而導致你的應用的數據流向難以理解。
額外的，每次父級組件發生更新時，子組件中所有的 prop 都將會刷新爲最新的值。這意味着你不應該在一個子組件內部改變 prop。如果你這樣做了，Vue 會在瀏覽器的控制檯中發出警告。
說明：因爲prop是單向向下綁定數據，所以子組件不可通過prop向父組件傳遞數據，發送消息。
2、子組件向父組件發送消息、傳遞事件
vue子組件向父組件發送消息，傳遞數據需要使用 $ emit 觸發父組件的自定義事件。這樣我們可以實現子組件向父組件傳遞數據。
用法：vm.$emit(“listenEven”,arg)
listenEven：觸發的事件名；
arg：傳遞的參數
完整代碼如下；
父組件App.vue代碼：
<template>
<div id="app">
<child-node title="靜態數據1" :activeData="plugdatas" @listenEvent="getListenEvent"></child-node>
<div>子組件傳遞的數據：{{sendValue}}</div>
</div>
</template>
<script>
import ChildNode from './components/ChildNode'
export default {
name: 'App',
data(){
return{
plugdatas:"動態傳遞的數據2",
sendValue:""
}
},
components:{
ChildNode
},
methods:{
getListenEvent:function(msg){
this.sendValue = msg;
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
子組件ChildNode.vue代碼
<template>
<div>
<div>靜態數據：{{title}}</div>
<div>動態數據：{{activeData}}</div>
<div>
<input type="text" ref="input1"><button type="button" @click="sendMsg">發送事件</button>
</div>
</div>
</template>
<script>
export default {
name:"ChildNode",
props:["title","activeData"],
methods:{
sendMsg:function(){
let value = this.$refs.input1.value;
this.$emit("listenEvent",value);
}
}
}
</script>
<style>
</style>
我們可以通過這種方式實現父子組件之間相互通信，傳遞數據。封裝我們需要的組件！！！！！