1.组件间通信基本原则
1) 不要在子组件中直接修改父组件的状态数据
2) 数据在哪, 更新数据的行为(函数)就应该定义在哪
2.vue 组件间通信方式
1) props
2) vue 的自定义事件
3) 消息订阅与发布(如: pubsub 库)
4) slot
5) vuex(后面单独讲)
2.1组件间通信 1: props(适用于父子组件传递属性)
step1:父组件
<my-component name='tom' :age='30' :setName='setName'></my-component>
step2:子组件
在组件内声明所有的 props
方法1:只指定名称
props: ['name', 'age', 'setName']
方式2: 指定名称和类型
props: {
name: String,
age: Number,
setNmae: Function
}
方式3: 指定名称/类型/必要性/默认值
props: {
name: {type: String, required: true, default:xxx},
}
注意
- 此方式用于父组件向子组件传递数据
- 所有标签属性都会成为组件对象的属性, 模板页面可以直接引用
- 问题:
a. 如果需要向非直接子后代传递数据必须多层逐层传递
b. 兄弟组件间也不能直接 props 通信, 必须借助父组件才可以
2.2组件间通信 2: vue 自定义事件(适用于父子组件传递函数,代替props)
step1:父组件中自定义事件
<TodoHeader @addTodo="addTodo"/><!-- 給TodoHeader組件綁定addTodo的事件監聽 -->
step2:子组件中触发事件
this.$emit('addTodo', todo) // 此处todo是需要的数据,可以来自子组件
注意
- 此方式只用于子组件向父组件发送消息(数据)
- 问题: 隔代组件或兄弟组件间通信此种方式不合适
2.3组件间通信 3: 消息订阅与发布(PubSubJS 库)
查看是否已经存在该库:
npm info pubsub-js
若不存在,则先安装
npm install pubsub-js
step1:导入pubsub-js
import PubSub from 'pubsub-js'
发布消息
PubSub.publish('deleteTodo', index)
step2:导入pubsub-js
import PubSub from 'pubsub-js'
订阅消息
PubSub.subscribe('deleteTodo', (msg, index) => {
this.deleteTodo(index) // 此处deleteTodo是本组件定义的方法
})
注意
优点: 此方式可实现任意关系组件间通信(数据)
事件的 2 个重要操作(总结)
1) 绑定事件监听 (订阅消息)
目标: 标签元素 <button>
事件名(类型): click/focus
回调函数: function(event){}
2) 触发事件 (发布消息)
DOM 事件: 用户在浏览器上对应的界面上做对应的操作
自定义: 编码手动触发
2.4组件间通信 4: slot
此方式用于父组件向子组件传递标签数据
step1:子组件
<template>
<div>
<slot name="xxx">不确定的标签结构 1</slot>
<div>组件确定的标签结构</div>
<slot name="yyy">不确定的标签结构 2</slot>
</div>
</template>
step2:父组件
<child>
<div slot="xxx">xxx 对应的标签结构</div>
<div slot="yyy">yyyy 对应的标签结构</div>
</child>
