父子通信

父组件需要把数据传给子组件的时候，通过props，常见的场景：父组件产生的提示信息，需要子组件拿去显示：

1
2
3
4
5
6
7
8
9
<!-- 子组件代码 -->
Vue.component('error-msg', {
    props: ['error'],
    template: __inline("./error_msg.vue")
})

<div class="form-error">
    <p class="weui_toast_content">{{error}}</p>
</div>

这样父组件更新error值后，就能传递给子组件，子组件用来显示。
但props默认是单向的，虽然在老版本vue中可以用.sync进项双向通信，但这并不推荐，在2.0中已经废弃，因为所有子组件都是通过props读取父组件的，如果采用了双向通信，一个子组件改变了父组件的值，那么父组件将影响所有使用此数值的子组件，所以子父通信有专门的通信方式。

子组件传值给父组件

vue老版本中用$dispatch，子组件传递把需要向父组件传递的值通过$dispatch自定义一个事件，并传值，然而在新版中$dispatch也要废弃了。vue2.0中可以使用$emit来向父组件派发事件，父组件中用$on来监听自定义的事件，监听后父组件执行具体的方法，且通过事件传递给父组件的数据，以该方法的参数形式传入，父组件在所要执行的函数中得以使用。

1
2
3
4
5
6
<!-- 子组件test -->
var data = {
	a:11,
	b:22
}
this.$emit("senddata", data);

父组件：

1
2
3
4
5
6
7
<test v-on:senddata="getData"></test>

methods: {
        getData:function(data){
            console.log("子组件传递的数据：",data);
        }
    }

这样既可在vue中实现基本的父子组件的通信。

子组件相互通信

通信过程：子->父->子，子组件先通信给父组件，父组件再通过$broadcast派发给子组件。

Vuex统一管理