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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM