Vue2.0组件通信(非Vuex)

叙

最近学了Vue2.0，写写自己的一点总结，关于父子组件通信的，这点对于我来说，是看文档的时候比较难理解的。通过网上找资料和实践，也有一点理解。

例子使用以下代码模板

<script src="https://cdn.bootcss.com/vue/2.1.10/vue.min.js"></script><div id="app">    <!--父组件-->    <p>{{total}}</p>    <child @add="incrementTotal" ref="childTest" :num-a="total" num-s="total"></child>    <button type="button" @click="clickref">调用子组件</button></div><!--子组件--><template id="myChild">    <button @click="add">{{counter}}</button></template><script>    new Vue({        el:'#app',        data :{            total: 1                  },        methods:{            incrementTotal : function(){            },            clickref:function(){            }        },        components:{            'child' :{                template:'#myChild',                data : function(){                    return{                        counter : 0                    }                },                props:['numA','numS'],                methods:{                    add : function(){                    }                }            }        }    });</script>

父组件传数据给子组件

当子组件需要父组件传递的数据时，子组件要设置props,来接收父组件传递过去的值。
在这里父组件传递的是total，子组件设置props是[numA,numS]，接着在调用子组件的时候将父组件的数据传递过去，如下

    <child :num-a="total" num-s="total"></child>

这样就可以子组件’child’就能接收到父组件（也就是挂载在 app上的）的数据。

关于props的写法有多种，具体请看官方文档

父子通信-动态数据

有时候我们想实现父组件的数据能动态的传递给子组件，使用v-model来实现

<input v-model="total"><child :num-a="total"><!--props的另外一种写法--><scirpt>...props: {    numA: [String, Number]}</script>

子组件与父组件通信

有时候我们想要实现子组件调用父组件，那要怎么做呢？
我们可以通过触发事件来通知父组件改变数据。

父组件：

<div>    <child @add="incrementTotal" :num-a="total"></child> //监听子组件触发的add事件,然后调用incrementTotal方法</div>methods: {    incrementTotal() {        this.total +=1    }}

子组件：

components:{    'child' :{        template:'#myChild',        data : function(){            return{                counter : 0            }        },        props:['numA','numS'],        methods:{            add : function(){                this.counter +=1                this.$emit(<span class="hljs-string" style="color:rgb(42,161,152)">'add'</span>) <span class="hljs-comment" style="color:rgb(147,161,161)">//子组件通过 $emit触发父组件的方法add            }        }    }}

子组件执行add方法 => 触发$emit => 触发父组件add方法 => 执行 incrementTotal 方法 => 完成

父组件调用子组件

通过给子组件设置ref，可以很方便的获取到子组件，然后改变子组件。

    <child @add="incrementTotal" ref="childTest" :num-a="total" num-s="total"></child>

new Vue({    el:'#app',    data :{        total: 0              },    methods:{        incrementTotal : function(){            this.total += 1        },        clickref:function(){            let childRef = this.$refs.childTest //获取子组件                childRef.counter = 1221         //改变子组件的数据                childRef.add(11)                //调用子组件的方法        }    },    components:{        'child' :{            template:'#myChild',            data : function(){                return{                    counter : 0                }            },            props:['numA','numS'],            methods:{                add : function(num){                    this.counter +=1                    this.$emit('add')                    console.log('接收父组件的值'：+ num)                }            }        }    }});

子组件与子组件通信

如果2个组件不是父子组件那么如何通信呢？
这时可以通过eventHub来实现通信，
所谓eventHub就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。（或者使用vuex）

let eventHub = new Vue(); //创建事件中心

组件1触发：

<div @click="eve"></div>methods: {    eve() {        eventHub.$emit('change','hehe'); //eventHub触发事件    }}

组件2接收：

<div></div>created() {    eventHub.$on('change', () => { //eventHub接收事件        this.msg = 'hehe';    });}

这样就实现了非父子组件之间的通信了，原理就是把Hub当作一个中转站！

总结

例子代码：JSFiddle
参考：vue2.0父子组件以及非父子组件如何通信