Vue组件间通信
2019-10-08 本文已影响0人
领带衬有黄金
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>
