Vue中的6种组件通信方式

发布于:2023-01-04 ⋅ 阅读:(309) ⋅ 点赞:(0)

1、props

作用:让组件接收外部传过来的数据

适用场景:父子组件通信

3种书写方式

1.只接收:props:["name"];

2.限制类型:props:{"name:String"};

3.限制类型,限制必要性,指定默认值:props:{name:{type:string,required:true}}

props配置项详解:vue学习——props配置项详解

2、自定义事件

适用场景:子组件给父组件传递参数

使用 $on(eventName) 绑定事件(在父组件中绑定事件)
使用 $emit(eventName) 触发事件(子组件中触发事件)

自定义事件详解:vue学习——自定义事件详解

3、全局事件总线$bus

适用场景:万能

new Vue({
    ...
    beforeCreate(){
        Vue.prototype.$bus=this;
    },
   ...
}).$mount("#app")

全局事件总线$bus详解:vue学习——全局事件总线$bus详解

4、消息订阅与发布(pubsub)

适用场景:万能

消息订阅与发布详解:vue学习——消息订阅与发布pubsub详解

5、插槽

作用:让父组件可以向子组件指定位置插入html结构

适用场景:父子组件通信

3种方式

1.默认插槽

2.具名插槽

3.作用域插槽

slot插槽详解:vue学习——slot插槽详解及案例练习

6、Vuex

定义:在vue中实现集中式状态(数据)管理的一个vue插件,对vue应用中多个组件的共享状态进行集中式的管理

理解:父组件往子组件插入一段html代码

适用场景:万能

vuex详解:vue学习——vuex详解及案例练习​​​​​​​


网站公告

今日签到

点亮在社区的每一天
去签到