组件间传值

props(用于父向子传值)

代码实现

QQ图片20220619190258.png

注意：非props属性

// 1.当父组件给子组件设置了属性,但此属性在props中不存在,这是会自动绑定到子组件的根元素上 
// 2.如果组件跟元素已经存在对应属性,则会替换组件内部的值,class和style例外,他们会合并 
// 3.在子组件导出对象内设置inheritAttrs:false,则不会受父组件赋值的影响,class和style是例外

$emit(用于子向父传值)

代码实现

provide inject

作用: 依赖注入，将当前组件的方法和数据注入的子组件中，可以跨层级，非响应式(映射为计算属性为响应式)
代码实现

事件总线（EventBus）

代码实现

QQ图片20220619211545.png

EventBus. $off(事件名称)/ EventBus.$ off(); 移除事件
参考： Vue事件总线（EventBus）使用详细介绍 - 知乎 (zhihu.com)

observable跨组件状态存储器

前言：随着项目组件的细化，经常性的遇到多组件之间状态共享的情况，之前可使用Vuex解决这类问题，不过参照Vuex官网介绍，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天了解一下Vue.js2.6 新版本中新增的一个东西Vue.observable(object),这个API的出现能替代以前使用vuex进行数据状态管理的方案。通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况。官网描述如下 Vue.observable( object )

observable()方法，用于设置监控属性，这样就可以监控view视图Module中的属性值的变化，从而就可以动态的改变某个元素中的值，监控属性的类型不变量而是一个函数，通过返回一个函数给viewModule对象中的属性，从而来监控该属性。

代码实现
或者

QQ图片20220619215435.png

`$attrs/$listeners`

说明：$attrs 是一个属性集合，而 $listeners 是一个事件集合

`vuex`

[链接](4. VueX:普通使用、模块化、持久化 - 掘金 (juejin.cn))

其他

可以通过父组件进行数据中转
$root当前组件树根实例
$parent父实例
$children直接子组件
$refs用于获取设置了ref属性的html标签或者子组件（为例）

代码实现

QQ图片20220619231727.png

3. 组件：组件间传值