组件间通信

1，组件间通信基本原则

① 不要在子组件中直接修改父组件的状态数据

② 数据在哪，更新数据的行为（函数）就应该在哪。

2，vue 组件间通信方式

① props

使用组件标签时，

<myComponent name="Tom"  :age="13" :setName="setName" ></myComponent>

定义 myComponent 时，

在组件内声明所有的 props：

方式1，只指定名称：props：【'name'，'age'，'setName'】

方式2，指定名称和类型：

props:{

　　name：String,

　　age: Number，

　　setName：Function

}

方式3，指定名称/类型/必要性/默认值

props:{

　　name:{

　　　　type：String，

　　　　required：true，

　　　　default：xxx

　　}

}

此方式适用于父子 组件之间传递数据，所有标签属性都会成为组件对象的属性，模板可以直接引用

如果需要向非直接子组件传递数据需要多层逐层传递，兄弟组件也不能直接 props 通信，必须借助父组件才可以。

② vue 的自定义事件

此方式只用于子组件向父组件发送消息，隔代组件或兄弟组件间通信不适合这种方式。

子组件中 

this.$emit('addTodo', todo)    //触发自定义事件: addTodo

父组件中

<TodoHeader @addTodo="addTodo"/>

this.$on('addTodo',  this.addTodo)    // mounted 组件初始化时，绑定自定义事件(addTodo)监听

addTodo (todo) {        //methods

    this.todos.unshift(todo)

 }, 

 

或者父组件中：

<TodoHeader ref="header"/>

this.$refs.header.$on('addTodo',  this.addTodo)   //mounted

addTodo (todo) {           //methods

    this.todos.unshift(todo)

 }, 

③ 消息订阅与发布（如：pubsub库）

订阅消息：PubSub.subsribe('msg'，function(msg,data) {} )

发布消息：PubSub.publish（'msg'，data）

此方式可以实现任意关系组件间通信

④ slot

此方式适用于父组件向子组件传递 ' 标签数据 ' 

子组件 Child.vue

<template>

　　<div>

　　　　<slot name="xxx" > 不确定的标签结构 </slot>

　　　　<div>组件确定的标签结构</div>

　　　　<slot name="yyy">不确定的标签结构</slot>

　　</div>

</template>

父组件：

<child>

　　<div slot="xxx">xxx 对应的标签结构</div>

　　<div slot="yyy">yyy对应的标签结构</div>

</child>

⑤ vuex