首页 > 代码库 > Vuejs——(10)组件——父子组件通信

Vuejs——(10)组件——父子组件通信

 

目录(?)[+]

 

 

本篇资料来于官方文档:

http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1

本文是在官方文档的基础上,更加细致的说明,代码更多更全。

简单来说,更适合新手阅读

 

(二十七)父子组件通信

①访问子组件、父组件、根组件;

 

this.$parent    访问父组件

this.$children   访问子组件(是一个数组)

this.$root            根实例的后代访问根实例

示例代码:

[html] view plain copy
 
 技术分享技术分享
  1. <div id="app">  
  2.     父组件:  
  3.     <input v-model="val"><br/>  
  4.     子组件:  
  5.     <test :test="val"></test>  
  6. </div>  
  7. <script>  
  8.     var vm = new Vue({  
  9.         el: ‘#app‘,  
  10.         data: {  
  11.             val: 1  
  12.         },  
  13.         components: {  
  14.             test: {  
  15.                 props: [‘test‘],  
  16.                 template: "<input @keyup=‘findParent‘ v-model=‘test‘/>",  
  17.                 methods: {  
  18.                     findParent: function () {  
  19.                         console.log(this.$parent);  //访问根组件  
  20.                         console.log(this.$parent.val);  //访问根组件的val属性  
  21.                         console.log(this.$parent.$children.indexOf(this));  //查看当前能否在其父组件的子组件中找到索引  
  22.                         console.log(this.$parent === this.$root);   //查看父组件和根组件是不是全等的(因为他的父组件就是根组件)  
  23.                     }  
  24.                 }  
  25.             }  
  26.         }  
  27.     });  
  28. </script>  

当在子组件的输入框按键弹起时,显示内容依次为:

父组件、父组件的输入框的值(默认情况是1)、0(表示是父组件的children属性中的第一个元素)、true(由于父组件就是根组件,所以是全等的);

 

通过这样的方法,可以在组件树中进行互动。

 

②自定义事件:

首先,事件需要放置在events属性之中,而不是放置在methods属性中(新手很容易犯的错误),只能触发events属性中的事件,而methods属性中的事件是无法触发的。

事件

说明

$on(事件名)

事件名的类型是字符串(下同),调用它可以通过this.$on()来调用;

$emit(事件名, 参数)

用于触发事件,参数是用于传递给事件的参数。这个用于触发同级事件(当前组件的)

$dispatch(事件名, 参数)

①向上派发事件,用于向父组件传播。

②会首先触发当前组件的同名事件(如果有);

③然后会向上冒泡,当遇到第一个符合的父组件的事件后触发并停止;

④当父组件的事件的返回值设为true会继续冒泡去找下一个。

$broadcast(事件名, 参数)

①向下广播事件,用于向所有子组件传播。

②默认情况是仅限子组件;

③子组件事件的返回值是true,才会继续向该子组件的孙组件派发;

④不会触发自身同名事件;

 

其次,向上派发和向下广播有所区别:向上派发会触发自身同名事件,而向下广播不会;

 

第三,向上派发和向下广播默认只会触发直系(子或者父,不包括祖先和孙)的事件,除非事件返回值为true,才会继续在这一条线上继续。

 

第四,事件不能显式的通过 this.事件名 来调用它。

 

示例代码:

[html] view plain copy
 
 技术分享技术分享
  1. <div id="app">  
  2.     父组件:  
  3.     <button @click="parentClick">点击向下传播broadcast</button>  
  4.     <br/>  
  5.     子组件1:  
  6.     <children1></children1>  
  7.     <br/>  
  8.     另一个子组件1:  
  9.     <another-children1></another-children1>  
  10. </div>  
  11. <script>  
  12.     var vm = new Vue({  
  13.         el: ‘#app‘,  
  14.         data: {  
  15.             val: 1  
  16.         },  
  17.         methods: {  
  18.             parentClick: function () {  
  19.                 this.$broadcast("parentClick", "abc");  
  20.             }  
  21.         },  
  22.         events: {  
  23.             childrenClick: function () {  
  24.                 console.log("childrenClick-Parent");  
  25.             },  
  26.             parentClick: function () {  
  27.                 console.log("parentClick-Parent");  
  28.                 return true;  
  29.             }  
  30.         },  
  31.         components: {  
  32.             children1: {    //这个无返回值,不会继续派发  
  33.                 props: [‘test‘],  
  34.                 template: "<button>children1</button></br>子组件2:<children2></children2>",  
  35.                 events: {  
  36.                     childrenClick: function () {  
  37.                         console.log("childrenClick-children1");  
  38.                     },  
  39.                     parentClick: function (msg) {  
  40.                         console.log("parentClick-Children1");  
  41.                         console.log("message:" + msg);  
  42.                     }  
  43.                 },  
  44.                 components: {  
  45.                     children2: {  
  46.                         props: [‘test‘],  
  47.                         template: "<button @click=‘findParent‘>children-Click</button>",  
  48.                         methods: {  
  49.                             findParent: function () {  
  50.                                 this.$dispatch(‘childrenClick‘);  
  51.                             }  
  52.                         },  
  53.                         events: {  
  54.                             childrenClick: function () {  
  55.                                 console.log("childrenClick-children2");  
  56.                             },  
  57.                             parentClick: function (msg) {  
  58.                                 console.log("parentClick-Children2");  
  59.                                 console.log("message:" + msg);  
  60.                             }  
  61.                         }  
  62.                     }  
  63.                 }  
  64.             },  
  65.             anotherChildren1: { //这个是返回值为true,会继续向子组件的子组件派发  
  66.                 props: [‘test‘],  
  67.                 template: "<button>anotherChildren1</button></br>另一个子组件2:<another-children2></another-children2>",  
  68.                 events: {  
  69.                     childrenClick: function () {  
  70.                         console.log("childrenClick-anotherChildren1");  
  71.                         return true;  
  72.                     },  
  73.                     parentClick: function (msg) {  
  74.                         console.log("parentClick-anotherChildren1");  
  75.                         console.log("message:" + msg);  
  76.                         return true;  
  77.                     }  
  78.                 },  
  79.                 components: {  
  80.                     anotherChildren2: {  
  81.                         props: [‘test‘],  
  82.                         template: "<button @click=‘findParent‘>anotherChildren2-Click</button>",  
  83.                         methods: {  
  84.                             findParent: function () {  
  85.                                 this.$dispatch(‘childrenClick‘);  
  86.                             }  
  87.                         },  
  88.                         events: {  
  89.                             childrenClick: function () {  
  90.                                 console.log("childrenClick-anotherChildren2");  
  91.                             },  
  92.                             parentClick: function (msg) {  
  93.                                 console.log("parentClick-anotherChildren2");  
  94.                                 console.log("message:" + msg);  
  95.                             }  
  96.                         }  
  97.                     }  
  98.                 }  
  99.             }  
  100.   
  101.         }  
  102.     });  
  103. </script>  
  104.                },  
  105.                             parentClick: function () {  
  106.                                 console.log("parentClick-anotherChildren2");  
  107.                             }  
  108.                         }  
  109.                     }  
  110.                 }  
  111.             }  
  112.   
  113.         }  
  114.     });  
  115. </script>  

 

说明:

【1】点击父组件的按钮,会向下广播,然后触发子组件1本身,另外一个子组件1,以及另一个子组件2;

【2】点击子组件2的按钮,会触发子组件2的事件和子组件1的事件,但不会触发父组件的按钮;

【3】点击另一个子组件2的按钮,会触发另一个子组件2的事件,另一个子组件1的事件和父组件的事件(因为另一个子组件1的事件的返回值为true);

 

 

 

③使用v-on绑定自定义事件:

【1】简单来说,子组件触发某个事件(events里的方法)时,父组件也会执行某个方法(父组件methods里的方法)。

 

【2】触发的绑定写在模板之中(即被替换的那个template模板中),可以多个子组件的事件绑定一个父组件的方法,或者不同子组件的事情绑定不同父组件的方法,但是不能同一个子组件事件绑定多个父组件的方法。

 

【3】子组件派发消息传递的参数,即使子组件的事件没有参数,也不影响将参数传递给父组件的方法(即父组件的方法可以接受到子组件方法获取的参数)

 

如示例:

[html] view plain copy
 
 技术分享技术分享
  1. <div id="app">  
  2.     父组件:  
  3.     <button>点击向下传播broadcast</button>  
  4.     <br/>  
  5.     子组件1:  
  6.     <!--绑定写在这里,可以多个绑定同一个,或者不同绑定不同的,但不能一个绑定多个-->  
  7.     <children v-on:test="parent" @test2="another"></children>  
  8. </div>  
  9. <script>  
  10.     var vm = new Vue({  
  11.         el: ‘#app‘,  
  12.         data: {  
  13.             val: 1  
  14.         },  
  15.         methods: {  
  16.             parent: function (arg) {  
  17.                 console.log(arg);  
  18.                 console.log("the first method with test event");  
  19.             },  
  20.             another: function () {  
  21.                 console.log("another method");  
  22.             }  
  23.         },  
  24.         components: {  
  25.             children: {    //这个无返回值,不会继续派发  
  26.                 props: [‘test‘],  
  27.                 template: "<button @click=‘childClick‘>children1</button></br><button @click=‘childClick2‘>children1</button>",  
  28.                 methods: {  
  29.                     childClick: function () {  
  30.                         this.$emit("test", ‘the argument for dispatch‘);  
  31.                     },  
  32.                     childClick2: function () {  
  33.                         this.$emit("test2");  
  34.                     }  
  35.                 },  
  36.                 events: {  
  37.                     test: function () {  
  38.                         console.log("test");  
  39.                     },  
  40.                     test2: function () {  
  41.                         console.log("test2");  
  42.                     }  
  43.                 }  
  44.             }  
  45.         }  
  46.     });  
  47. </script>  

 

④子组件索引

简单来说:就是可以直接从索引获取到子组件,然后就可以调用各个子组件的方法了。

 

添加索引方法是:在标签里添加v-ref:索引名

调用组件方法是:vm.$ref.索引名

也可以直接在父组件中使用this.$ref.索引名

这个时候,就可以获得组件了,然后通过组件可以调用他的方法,或者是使用其数据。

 

示例代码:

[html] view plain copy
 
 技术分享技术分享
  1. <div id="app">  
  2.     父组件:  
  3.     <button @click="todo">触发子组件的事件</button>  
  4.     <br/>  
  5.     子组件1:  
  6.     <!--绑定写在这里,可以多个绑定同一个,或者不同绑定不同的,但不能一个绑定多个-->  
  7.     <children v-ref:child></children>  
  8. </div>  
  9. <script>  
  10.     var vm = new Vue({  
  11.         el: ‘#app‘,  
  12.         methods: {  
  13.             todo: function () {  
  14.                 this.$refs.child.fromParent();  //通过索引调用子组件的fromParent方法  
  15.             }  
  16.         },  
  17.         components: {  
  18.             children: {    //这个无返回值,不会继续派发  
  19.                 props: [‘test‘],  
  20.                 template: "<button>children1</button>",  
  21.                 methods: {  
  22.                     fromParent: function () {  
  23.                         console.log("happened fromParent by ref");  
  24.                     }  
  25.                 }  
  26.             }  
  27.         }  
  28.     });  
  29. </script>  
技术分享

 

Vuejs——(10)组件——父子组件通信