Vue中组件通信的几种方法（Vue3的7种和Vue2的12种组件通信）

信）

Vue3组件通信⽅式：

props$emitexpose / ref$attrsv-modelprovide / injectVuex

使⽤⽅法：

props

⽤ props 传数据给⼦组件有两种⽅法，如下⽅法⼀，混合写法

// Parent.vue 传送

// Child.vue 接收

⽅法⼆，纯 Vue3 写法

// Parent.vue 传送

// Child.vue 接收

注意：

如果⽗组件是混合写法，⼦组件纯 Vue3 写法的话，是接收不到⽗组件⾥ data 的属性，只能接收到⽗组件⾥ setup 函数⾥传的属性如果⽗组件是纯 Vue3 写法，⼦组件混合写法，可以通过 props 接收到 data 和 setup 函数⾥的属性，但是⼦组件要是在 setup ⾥接收，同样只能接收到⽗组件中 setup 函数⾥的属性，接收不到 data ⾥的属性

官⽅也说了，既然⽤了 3，就不要写 2 了，所以不推荐混合写法。下⾯的例⼦，⼀律只⽤纯 Vue3 的写法，就不写混合写法了$emit

// Child.vue 派发

// Parent.vue 响应

expose / ref

⽗组件获取⼦组件的属性或者调⽤⼦组件⽅法

// Child.vue

// Parent.vue 注意 ref=\"comp\"

attrs

attrs：包含⽗作⽤域⾥除 class 和 style 除外的⾮ props 属性集合

// Parent.vue 传送

// Child.vue 接收

v-model

可以⽀持多个数据双向绑定

// Parent.vue

// Child.vue

provide / inject

provide / inject 为依赖注⼊

provide：可以让我们指定想要提供给后代组件的数据或

inject：在任何后代组件中接收想要添加在这个组件上的数据，不管组件嵌套多深都可以直接拿来⽤// Parent.vue

// Child.vue

Vuex

// store/index.js

import { createStore } from \"vuex\"export default createStore({ state:{ count: 1 }, getters:{

getCount: state => state.count },

mutations:{ add(state){

state.count++ } }})

// main.js

import { createApp } from \"vue\"import App from \"./App.vue\"import store from \"./store\"

createApp(App).use(store).mount(\"#app\")

// Page.vue

// ⽅法⼀ 直接使⽤

// ⽅法⼆ 获取

Vue2.x 组件通信⽅式

Vue2.x 组件通信共有12种:

props

$emit / v-on.syncv-modelref

$children / $parent$attrs / $listenersprovide / injectEventBusVuex$rootslot

⽗⼦组件通信可以⽤：

props

$emit / v-on

$attrs / $listenersrefsyncv-model

$children / $parent兄弟组件通信可以⽤：

EventBusVuex$parent

跨层级组件通信可以⽤：

provide/injectEventBusVuex

$attrs / $listeners$root

使⽤⽅法：props

⽗组件向⼦组件传送数据，这应该是最常⽤的⽅式了

⼦组件接收到数据之后，不能直接修改⽗组件的数据。会报错，所以当⽗组件重新渲染时，数据会被覆盖。如果⼦组件内要修改的话推荐使⽤ computed

// Parent.vue 传送

// Child.vue 接收export default {

// 写法⼀ ⽤数组接收 props:['msg'],

// 写法⼆ ⽤对象接收，可以限定接收的数据类型、设置默认值、验证等 props:{ msg:{

type:String,

default:'这是默认数据' }},

mounted(){

console.log(this.msg)},}

.sync

可以帮我们实现⽗组件向⼦组件传递的数据 的双向绑定，所以⼦组件接收到数据后可以直接修改，并且会同时修改⽗组件的数据

// Parent.vue

v-model

和 .sync 类似，可以实现将⽗组件传给⼦组件的数据为双向绑定，⼦组件通过 $emit 修改⽗组件的数据

// Parent.vue

ref

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

如果在⼦组件上，引⽤的指向就是⼦组件实例，然后⽗组件就可以通过 ref 主动获取⼦组件的属性或者调⽤⼦组件的⽅法

// Child.vueexport default { data(){ return {

name:\"沐华\" } },

methods:{

someMethod(msg){ console.log(msg) } }}

// Parent.vue

$emit / v-on

⼦组件通过派发事件的⽅式给⽗组件数据，或者触发⽗组件更新等操作

// Child.vue 派发export default { data(){

return { msg: \"这是发给⽗组件的信息\" }},

methods: {

handleClick(){

this.$emit(\"sendMsg\ }},}

// Parent.vue 响应

export default { methods:{

getChildMsg(msg){

console.log(msg) // 这是⽗组件接收到的消息 } }}

$attrs / $listeners

多层嵌套组件传递数据时，如果只是传递数据，⽽不做中间处理的话就可以⽤这个，⽐如⽗组件向孙⼦组件传递数据时

$attrs：包含⽗作⽤域⾥除 class 和 style 除外的⾮ props 属性集合。通过 this.$attrs 获取⽗作⽤域中所有符合条件的属性集合，然后还要继续

传给⼦组件内部的其他组件，就可以通过 v-bind=\"$attrs\"

$listeners：包含⽗作⽤域⾥ .native 除外的监听事件集合。如果还要继续传给⼦组件内部的其他组件，就可以通过 v-on=\"$linteners\"

使⽤⽅式是相同的

// Parent.vue