正文
vue_组件间通信：自定义事件、消息发布与订阅、槽
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
自定义事件
只能用于 子组件 向 父组件 发送数据
可以取代函数类型的 props
在父组件： 给子组件@add-todo-event="addTodo"
在子组件： 相关方法中，this.$emit("add-todo-event", newTodo);
pubsub 消息发布/订阅
实现任意关系的组件间通信
yarn add pubsub-js
实例：
- 子组件发布消息： 要求删除 todo
methods: {
PubSub.publish("deleteTodo", this.index);
}
- 父组件订阅消息： 执行回调，删除 todo
mounted: {
PubSub.subscribe("deleteTodo",(messageName, todosIndex)=>{
this.deleteTodo(todosIndex);
});
}
插槽内容 slot
父组件 向 子组件传递"标签数据"
应对： 不仅数据是动态的，结构也是动态的
App.vue 父组件 使用子组件时，声明用哪些槽：
<Child>
</Child>
子组件Child 定义槽：
<template>
</template>
插槽显示的顺序，由子组件编码决定
细节： 在写公共组件 Child 时，先不写槽，直接写正常的代码，将样式搞定，再抽出槽
