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 时，先不写槽，直接写正常的代码，将样式搞定，再抽出槽