vue中组件之间通讯的13种方式

最常见的几种:

目录

父子之间传值:

1.props  父向子传值

2.$emit 子向父传值

​​​​​​​3.ref

4.$parent $children

5.$attrs和$listeners

6.v-model

7.sync

兄弟之间传值

8.bus

跨组件通讯传值

9.Vuex跨组件通信

10.store路由

11.slot

12.$root

13.pinia

14.provide inject

---

父子之间传值:

1.props  父向子传值

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

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

2.$emit 子向父传值

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

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

​​​​​​​3.ref

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

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

4.$parent $children

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

5.$attrs和$listeners

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

6.v-model

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

7.sync

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

兄弟之间传值

8.bus

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

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

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

跨组件通讯传值

9.Vuex跨组件通信

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

10.store路由

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

11.slot

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

11.2分为默认插槽,具名插槽,作用域插槽

12.$root

12.1可以拿到 App.vue 里的数据和方法

13.pinia

13.1菠萝传参与vuex基本一致

14.provide inject

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

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