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 時，先不寫槽，直接寫正常的代碼，將樣式搞定，再抽出槽