Vue父子组件之间的相互通信

Posted 2020-10-26 明镜止水

       组件是Vue知识体系中最重要的一部分之一，父子组件由于作用域的不同，无法直接对对方的数据进行操作。它们之间的数据传递都是通过中间介质进行的，父组件给子组件传值是通过props属性，而子组件给父组件传值是通过自定义事件。

 

1.父组件向子组件传值

 1     <div id="app">
 2         <parent></parent>
 3     </div>
 4        
 5     <template id="parent"> 
 6     　　<div> 
 7     　　　　<div style="border:1px solid red;width: 300px;">
 8     　　　　　　<h1>父组件</h1>
 9     　　　　　　<p>{{parentMsg}}</p>
10     　　　　</div>
11     　　　　<child :get-parent="parentMsg"></child> 
12     　　</div>
13     </template>
14 
15     <template id="child">  
16     　　<div>
17     　　　　<h1>子组件</h1>
18     　　　　<p>{{childMsg}}</p>
19            <button @click="printParentMsg()">父组件信息</button> 
20     　　</div>
21     </template>
22 
23     <script>
24 
25         var child={
26     　　　　data(){
27     　　　　　　return {
28     　　　　　　　　childMsg:"我是子组件数据"
29     　　　　　　}
30     　　　　},
31     　　　　template:"#child",
32            props: [‘getParent‘],
33            methods: {
34                printParentMsg(){
35                    alert(‘父组件信息：‘ + this.getParent);
36                }
37            }
38     　　};
39 
40     　　var parent={
41 
42     　　　　data(){
43     　　　　　　return {
44     　　　　　　　　parentMsg:"我是父组件的数据"
45     　　　　　　}
46     　　　　},
47 
48     　　　　components:{
49     　　　　　　‘child‘:child
50     　　　　},
51 
52             template: ‘#parent‘
53         }
54 
55     　　new Vue({
56     　　　　el:"#app",
57     　　　　components:{
58     　　　　　　‘parent‘:parent
59     　　　　}
60     　　});
61 
62     </script>

具体方法：

1.子组件在props中创建一个属性，用来接收父组件传来的值

2.父组件中注册子组件

3.在父组件模板中的子组件标签添加对应于子组件props中的属性

4.把需要传递的值赋给上一步子组件标签创建的属性（这里要注意的是props中的属性用驼峰命名法，标签中的属性用横杠命名法）

 

2.子组件向父组件传值

 1     <div id="app">
 2         <parent></parent>
 3     </div>
 4        
 5     <template id="parent"> 
 6     　　<div> 
 7     　　　　<div style="border:1px solid red;width: 300px;">
 8     　　　　　　<h1>父组件</h1>
 9     　　　　　　<p>{{parentMsg}}</p>
10     　　　　</div>
11     　　　　<child v-on:receive-msg="handleMsg"></child> 
12     　　</div>
13     </template>
14 
15     <template id="child">  
16     　　<div>
17     　　　　<h1>子组件</h1>
18     　　　　<p>{{childMsg}}</p>
19            <button @click="sendToParent">传递信息</button> 
20     　　</div>
21     </template>
22 
23     <script>
24 
25         var child={
26     　　　　data(){
27     　　　　　　return {
28     　　　　　　　　childMsg:"我是子组件数据"
29     　　　　　　}
30     　　　　},
31     　　　　template:"#child",
32            props: [‘getParent‘],
33            methods: {
34                sendToParent(){
35                    console.log(‘sendToparent‘)
36                    this.$emit("receive-msg", "已经收到子组件传来的消息");
37                }
38            }
39     　　};
40 
41     　　var parent={
42 
43     　　　　data(){
44     　　　　　　return {
45     　　　　　　　　parentMsg:"我是父组件的数据"
46     　　　　　　}
47     　　　　},
48 
49     　　　　components:{
50     　　　　　　‘child‘:child
51     　　　　},
52 
53            template: ‘#parent‘,
54 
55            methods: {
56                handleMsg: function(msg){
57                    console.log(‘handleMsg‘)
58                    alert(msg);
59                } 
60            }
61         }
62 
63     　　new Vue({
64     　　　　el:"#app",
65     　　　　components:{
66     　　　　　　‘parent‘:parent
67     　　　　}
68     　　});
69 
70     </script>

具体方法：

1.子组件在某种条件下触发一个自定义事件

2.该自定义事件需要挂载在父组件的子组件标签上，让父组件可以监听到这个自定义事件

3.将需要传的值放在$emit方法的第二个参数上，该值将作为实参传递给响应自定义事件的方法

（注意！这里有个小坑：自定义事件貌似不支持驼峰命名法，改用横杠命名即可，否则会接收不到值）