vue之父子組件之間的通信方式
阿新 • • 發佈：2018-05-21
send 註冊 事件 tle self. 傳遞 scrip image ger
（一）props與$emit
<!-這部分是一個關於父子組件之間參數傳遞的例子--> <!--父組件傳遞參數到子組件是props，子組件傳遞參數到父組件是用事件觸發$emit--> <!OCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <sccipt src="js/vue.js" type="text/javascript"></script> </head> <body> <div id="parent"> <input type="text" v-model="parentMassage" />{{parentMassage}} </br> <!--child組件註意點：1.props屬性前面加v-bind或者：的時候就變成了動態綁定父組件的值，比如parent-send，綁定的元素只能是小寫或者是連短線形式的，這個在子組件的props數組裏改成駝峰式的，如果是傳遞的大小寫混合則就傳遞不了參數了。 2.childmessage傳遞的參數不要加括號，比如childmessage(data)，這個在父組件的函數中獲取不到子組件傳遞的值。--> </div> <script> var child={ template:‘<button @click="add" >局部組件:{{childMessage}}</button>‘, props:[‘parentSend‘], data:function(){//子組件中的數據都是以函數返回形式的 return{ childMessage:this.parentSend } }, methods:{ add:function(){ var _self=this; _self.childMessage++; _self.sendToParent(); }, sendToParent:function(){ debugger this.$emit(‘child-message‘,1);//這裏的this是子組件button } } }; var vue=new Vue({ el:"parent", data:{ parentMassage:111 }, methods:{ childmessage:function(data){ debugger var _self=this; _self.parentMessage+=data;//子組件傳遞來的那個參數值1 } }, components:{ "child":child }//註冊子組件 }) </script> </body> </html>
(二)$emit與$on
var Event = new Vue(); 相當於又new了一個vue實例，Event中含有vue的全部方法；
Event.$emit(‘msg‘,this.msg); 發送數據，第一個參數是發送數據的名稱，接收時還用這個名字接收，第二個參數是這個數據現在的位置；
Event.$on(‘msg‘,function(msg){ 接收數據，第一個參數是數據的名字，與發送時的名字對應，第二個參數是一個方法，要對數據的操作
/這裏是對數據的操作
})
例：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>孫三峰--博客園</title>
6 <script type="text/javascript" src="js/vue2.0.3.js" ></script>
7 <script type="text/javascript">
8 //準備一個空的實例對象
9 var Event = new Vue();
10 var A={
11 template:`
12 <div style="border: 1px solid red; margin-bottom: 10px； width: 300px;">
13 <h4>A組件</h4>
14 <p>{{a}}</p>
15 <input type="button" value="把A數據給C" @click="send" />
16 </div>
17 `,
18 data(){
19 return {
20 a:‘我是A裏面的數據‘
21 }
22 },
23 methods:{
24 send(){ //A發送數據
25 Event.$emit(‘a-msg‘,this.a);
26 }
27 }
28 };
29 var B={
30 template:`
31 <div style="border: 1px solid green; margin-bottom: 10px； width: 300px;">
32 <h4>B組件</h4>
33 <p>{{b}}</p>
34 <input type="button" value="把B數據給C" @click="send" />
35 </div>
36 `,
37 data(){
38 return {
39 b:‘我是B裏面的數據‘
40 }
41 },
42 methods:{
43 send(){
44 Event.$emit(‘b-msg‘,this.b);
45 }
46 }
47 };
48 var C={
49 template:`
50 <div style="border: 1px dotted green; margin-bottom: 10px；width: 300px;">
51 <h4>我是C組件,我在坐等接收數據</h4>
52 <p>{{a}}</p>
53 <p>{{b}}</p>
54 </div>
55 `,
56 data(){
57 return{
58 a:‘‘,
59 b:‘‘
60 }
61 },
62 mounted(){ //兩種接收的方式
63 var _this = this;
64 Event.$on(‘a-msg‘,function(a){
65 _this.a=a;
66 });
67 Event.$on(‘b-msg‘,function(b){
68 this.b = b;
69 }.bind(this))
70 }
71 };
72 window.onload=function(){
73 new Vue({
74 el:‘#box‘,
75 data:{
76
77 },
78 components:{
79 ‘com-a‘:A,
80 ‘com-b‘:B,
81 ‘com-c‘:C
82 }
83 })
84 }
85 </script>
86 </head>
87 <body>
88 <div id="box">
89 <com-a></com-a>
90 <com-b></com-b>
91 <com-c></com-c>
92 </div>
93 </body>
94 </html>
效果圖：
說說(一)中遇到的坑，就是那個$emit總是觸發不了的問題，用$emit 實現子組件向父組件傳值 報fnsapply is not a function錯誤，解決方法：
解決方案1:
一樣的報錯，我是父組件傳給子組件
解決方案2:
-
v-on:tatseSure="sure"應該這樣寫：v-on:tatse-sure="sure"或者@tatse-sure="sure",$emit中也改 -
確保
sure是定義在父組件methods中的函數
解決方案3:
是方法的命名沖突了 所以導致了這個問題。
最後順便說下變量監控函數$watch:
vm.$watch(‘a‘, function (newVal, oldVal) {
// 做點什麽
})vue之父子組件之間的通信方式