Vuejs——（10）组件——父子组件通信

￡神魔★判官ぃ 2022-07-12 08:26 274阅读 0赞

**本篇资料来于官方文档：**

**http://cn.vuejs.org/guide/components.html\#u7236\_u5B50\_u7EC4\_u4EF6\_u901A\_u4FE1**

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

**简单来说，更适合新手阅读**

**（二十七）父子组件通信**

### ①访问子组件、父组件、根组件； ###

**this.$parent**    访问父组件

**this.$children**   访问子组件（是一个数组）

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

示例代码：

**\[html\]**  [view plain][]   [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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属性中的事件是无法触发的。

<table style="color:rgb(85,85,85); font-family:'microsoft yahei'; font-size:15px; line-height:35px"> 
 <tbody> 
 <tr> 
 <td> 事件 </td> 
 <td> 说明 </td> 
 </tr> 
 <tr> 
 <td> $on(事件名) </td> 
 <td> 事件名的类型是字符串（下同），调用它可以通过this.$on()来调用； </td> 
 </tr> 
 <tr> 
 <td> $emit(事件名, 参数) </td> 
 <td> 用于触发事件，参数是用于传递给事件的参数。这个用于触发同级事件（当前组件的） </td> 
 </tr> 
 <tr> 
 <td> $dispatch(事件名, 参数) </td> 
 <td> ①向上派发事件，用于向父组件传播。 ②会首先触发当前组件的同名事件（如果有）； ③然后会向上冒泡，当遇到第一个符合的父组件的事件后触发并停止； ④当父组件的事件的返回值设为true会继续冒泡去找下一个。 </td> 
 </tr> 
 <tr> 
 <td> $broadcast(事件名, 参数) </td> 
 <td> ①向下广播事件，用于向所有子组件传播。 ②默认情况是仅限子组件； ③子组件事件的返回值是true，才会继续向该子组件的孙组件派发； ④不会触发自身同名事件； </td> 
 </tr> 
 </tbody> 
</table>

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

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

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

示例代码：

**\[html\]**  [view plain][]   [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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****>**

![save_snippets.png][]

[view plain]: http://blog.csdn.net/qq20004604/article/details/52441770#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/1867138
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/1867138/fork
[save_snippets.png]: /images/20220710/3399fc664fd646769d6279da3a3f7914.png