关于Vue组件间的六种通信方式 | 青训营

128 阅读2分钟

此文章是针对Vue2的组件间通信的复习总结

组件通信方式1:props

使用场景:父子间通信 传递数据类型:
1:可能是函数 -----------实质子组件想给父亲传递数据,传递的是函数的话,可以通过调用这个函数来实现传参。
2:可能不是函数-----------实质就是父亲给子组件传递数据

<TodoList :todos="123"  updateChecked="hander">

特殊情况:路由传递props
1:布尔值类型,把路由中params参数映射为组件props数据
2:对象,静态数据,很少用
3:函数,可以把路由中params|query参数映射为组件props数据

组件通信方式2:自定义事件

$emit和 $on
$emit是触发自定义事件,$on是监听,也写成@
事件:原生DOM事件----click || mouseenter || ........
事件:自定义事件-----子给父传递数据

组件通信方式3:$bus 全局事件总线----万能

组件实例的原型的原型指向的Vue.prototype

组件通信方式4:pubsub-js发布订阅消息----万能

在vue中根本不用,在React用

组件通信方式5:Vuex仓库 -----数据非持久化----万能的

核心概念:5个配置项
state:用于储存数据
mutations:只用于修改数据,且函数名大写,但其实本质也还是一个函数
actions:一般用于进行ajax操作,和修改数据前的相关操作,同上
getters:用于对state数据仓库的数据进行提取或计算,和Vue组件里面计算属性computed差不多
modules:对数据仓库进行模块化配置

组件通信方式6:插槽-----父子通信--万能

在子组件中用slot占位
插槽分类: 1.默认插槽
2.具名插槽
3.作用域插槽:子组件的数据来源于父组件,但是子组件的自己的结构由父亲决定。