Vue组件间通信

1. 组件间通信

1.2 组件间通信基本原则

不要在子组件中直接修改父组件的状态数据
数据在哪, 更新数据的行为(函数)就应该定义在哪

1.3 vue 组件间通信方式

props 
vue 的自定义事件
消息订阅与发布(如:pubsub 库) 
slot 
vuex

2. 组件间通信

2.1 props

2.1.2 使用组件标签时

<my-componentname='tom':age='3':set-name='setName'></my-component>

2.1.3 定义 MyComponent 时

在组件内声明所有的 props
只指定名称 props:['name','age','setName']
指定名称和类型 props:{ name:String, age:Number, setNmae:Function }
指定名称/类型/必要性/默认值 props:{ name:{type:String,required:true,default:xxx}, }

2.1.4 注意

此方式用于父组件向子组件传递数据
所有标签属性都会成为组件对象的属性, 模板页面可以直接引用
问题: 
a. 如果需要向非子后代传递数据必须多层逐层传递 
b. 兄弟组件间也不能直接 props 通信, 必须借助父组件才可以

2.2 vue 自定义事件

2.2.1 绑定事件监听(emit)

// 方式一: 通过 v-on 绑定 @delete_todo="deleteTodo" 
// 方式二: 通过$on() this.$refs.xxx.$on('delete_todo',function(todo){ this.deleteTodo(todo) })

2.2.2 触发事件

// 触发事件(只能在父组件中接收) this.$emit(eventName,data)

2.2.3 注意:

1) 此方式只用于子组件向父组件发送消息(数据) 
2) 问题: 隔代组件或兄弟组件间通信此种方式不合适

2.3. 消息订阅与发布(PubSubJS 库)

2.3.1 订阅消息(绑定事件)

PubSub.subscribe('msg',function(msg,data){})

2.3.2 发布消息(操作事件)

PubSub.publish('msg',data)

2.3.3 注意

1) 优点: 此方式可实现任意关系组件间通信(数据)

2.3.4 事件的 2 个重要操作(总结)

1) 绑定事件监听 (订阅消息) 目标: 标签元素 <button> 事件名(类型):click/focus 回调函数:function(event){}
2) 触发事件 (发布消息) DOM 事件: 用户在浏览器上对应的界面上做对应的操作 自定义: 编码手动触发

2.4. slot

2.4.1 理解

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

2.4.2 子组件:Child.vue

<template>
<div>
<slot name="xxx"> 不确定的标签结构 1 </slot> 
<div> 组件确定的标签结构 </div>
<slot name="yyy"> 不确定的标签结构 2 </slot>
</div>
</template>

2.4.3 父组件:Parent.vue

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

2.5 后续可以使用vuex 全局管理状态