❤️你不晓得的组件通信的方式《还不进来瞅瞅？》

父子组件通信可以用:

props
$emit / v-on
$attrs / $listeners
ref
.sync
v-model
$children / $parent 

兄弟组件通信可以用:

EventBus
Vuex
$parent

跨层级组件通信可以用:

provide / inject
EventBus
Vuex
$attrs / $listeners
 

通信使用写法
父向子传递数据  常用的就是props
子组件接收到数据之后不能直接修改父组件的数据,  当父组件重新渲染时   数据会被覆盖 . 

如果子组件内要修改的话用computed比较好

prop 只可以从上一级组件传递到下一级组件（父子组件），即所谓的单向数据流。而且 prop 只读，不可被修改

.sync
父组件向子组件传递数据的双向绑定     子组件接收到的数据可以直接修改   并且会同时修改父组件的数据

v-model
和.sync类似   可以实现将父组件传给子组件的数据为双向绑定, 子组件通过$emit修改父组件的数据

ref
ref如果在普通的DOM元素上   指向的就是该DOM元素

 如果在子组件上,   引用的指向就是子组件实例,  父组件就可以通过refs主动获取子组件的属性或者调用子组件的方法

$emit  /  v-on
子组件通过派发事件给父组件数据,  或者触发父组件更新等操作

$emit()——把事件沿着作用域链向上派送
v-on 指令是事件绑定指令，当用户需要点击，按下键盘，滚动鼠标等操作时，想要添加一些自己的逻辑处理时，就可以为特定的元素绑定一些特定的事件
$attrs / listeners
多层嵌套组件传递数据  如果只是传递数据,而不做处理的话就用这个  

   $attrs :    包括父作用域里面除了class 和 style 除外的非props属性集合.  通过this.$attrs获取父作用域中所有符合条件的属性集合     然后继续传给子组件内部其他的组件    就可以通过v-bind = "$linteners"
   $listeners:   包括了父作用域里 .native除外的监听事件集合.   如果还要传给子组件内部的其他组件,  可以通过v-on = '$linteners'
$children / $parent
$children : 获取到所有只包含子组件的VueComponent对象数组, 可以直接拿到子组件中所有的数据和方法等  不包括孙组件
$parent  :  获取到一个父节点的VueComponent对象,  同样包含父节点中所有数据和方法等
provide  /  inject
        provide  /  inject   为依赖注入 ,  不推荐直接用于应用程序代码中, 但是在一些插件或组件库里  被常用   避免重复声明props

provide :  可以让我们指定想要提供给后代组件的数据或方法
inject :  在任何后代组件中接收想要添加在这个组件上的数据或方法,  不管组件嵌套多深都可以直接用
        这两个传递的数据不是响应式的 

EventBus
EventBus 是事件总线,  不管是父子组件 ,兄弟组件 ,  跨层级组件等都可以使用它完成通信操作

Vuex
Vuex是状态管理器,   集中式存储管理所有组件的状态.   

$root
$root 可以拿到APP.vue里面的数据和方法

访问跟组件的属性和方法: $root 只是对根组件有用, 不是父组件, $root 只是对根组件有用

slot
slot就是把子组件的数据通过插槽的方式传给父组件使用,   然后在插回来   就是用来占个坑使用时候将组件之间的内容用来填坑
 

最常见的几种:

1.props  父向子传值

1.1父组件通过:自定义名称="值",

1.2子组件使用props接受,与data同级,子组件接收到数据之后，不能直接修改父组件的数据。否则会报错，因为当父组件重新渲染时，数据会被覆盖。如果只在子组件内要修改的话推荐使用 computed.

2.$emit 子向父传值

2.1子组件通过this.$emit('自定义事件',参数)  

2.2父组件用@接受自定义事件,并定义方法.

3.v-model

3.1向标签内的value属性赋值
给标签绑定input事件, 并把收到的值, 赋予给vue变量
//也可作为组件的双向绑定,@input和:value
//数据改变影响视图 视图的内容发生改变会影响数据
//复选框的属性值是字符串则收集的是boolean
//属性值是数组则收集到的是value

4..sync

4.1与v-model一样,但是v-model只能用一次,.sync可以用多次,vue3中删除了.sync

5.provide inject

5.1在祖先组件使用provide(key,value)传值

5.2在子辈组件使用nject('事件名')接收

6.ref

6.1ref 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例.

6.2可以通过实例直接调用组件的方法或访问数据。也算是子组件向父组件传值的一种

7.$parent $children

7.1通过parent可以获父组件实例 ，然 后通过这个实例就可以访问父组件的属 性和方法 。
它还有一个兄弟root，可以获取根组件实例。

8.$attrs和$listeners

8.1正常情况下需要借助父亲的props作为中间过渡，但是这样在父亲组件就会多了一些跟父组件业务无关的属性，耦合度高，借助$attrs可以简化些，而且祖跟孙都无需做修改

9.bus

9.1在src中新建一个Bus.js的文件，然后导出一个空的vue实例 ?
9.2在传输数据的一方引入Bus.js ，然后通过Bus. $emit ( “ 事 件 名 ” , "

参 数 " ) 来 派发事件 ， 数据是以$emit()的参数形式来传递 ?

9.3在接受的数据的一方 引入 Bus.js 然后通过 Bus.$on(“事件名”,(data)=>{data是接受的数据})
 

10.Vuex跨组件通信

10.1一般用于解决复杂组件之间的通信传值

11.store路由

11.1A页面跳转B页面时使用this.router.push(/B?name=danseek), B页 面可以使用this.route.query.name 来获取A页面传过来的值
上面要注意router和route的区别.

12.slot

12.1插槽也可以作为是组件之间传参.

13.$root
13.1可以拿到 App.vue 里的数据和方法

14.pinia

14.1菠萝传参与vuex基本一致