Vue3 的 7 种和 Vue2 的 12 种组件通信(1)

// Parent.vue 传送

// Child.vue 接收

注：如果父组件是混合写法，子组件纯 Vue3 写法的话，是接收不到父组件里 data 的属性，只能接收到父组件里 setup 函数里传的属性

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

官方也说了，不推荐混合写法。下面的例子，一律只用纯 Vue3 的写法，就不写混合写法了

2. $emit

// Child.vue 派发

// 写法一

<button @click=“emit(‘myClick’)”>按钮

// 写法二

<button @click=“handleClick”>按钮

// Parent.vue 响应

<child @myClick=“onMyClick”>

3. expose / ref

父组件获取子组件的属性或者调用子组件方法

// Child.vue

// Parent.vue  注意 ref=“comp”

<button @click=“handlerClick”>按钮

4. attrs

attrs：包含父作用域里除 class 和 style 除外的非 props 属性集合

// Parent.vue 传送

// Child.vue 接收

5. v-model

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

// Parent.vue

// Child.vue

<button @click=“handlerClick”>按钮

6. provide / inject

provide / inject 为依赖注入

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

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

// Parent.vue

// Child.vue

7. 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

// 方法一 直接使用

{{ $store.state.count }}

<button @click=“$store.commit(‘add’)”>按钮

// 方法二 获取

8. mitt

Vue3 中没有了 EventBus 跨组件通信，但是现在有了一个替代的方案 mitt.js，原理还是 EventBus

先安装

npm i mitt -S

然后像以前封装 bus 一样，封装一下

mitt.js

import mitt from ‘mitt’

const mitt = mitt()

export default mitt

然后两个组件之间通信的使用

// 组件 A

// 组件 B

Vue2.x 组件通信方式

---

Vue2.x 组件通信共有12种

1. props

2. $emit / v-on

3. .sync

4. v-model

5. ref

6. parent

7. listeners

8. provide / inject

9. EventBus

10. Vuex

11. $root

12. slot

父子组件通信可以用：

• props

• $emit / v-on

• listeners

• ref

• .sync

• v-model

• parent

兄弟组件通信可以用：

• EventBus

• Vuex

• $parent

跨层级组件通信可以用：

• provide/inject

• EventBus

• Vuex

• listeners

• $root

Vue2.x 通信使用写法

---

下面把每一种组件通信方式的写法 一 一 列出

1. props

父组件向子组件传送数据，这应该是最常用的方式了

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

// Parent.vue 传送

// Child.vue 接收

export default {

// 写法一 用数组接收

props:[‘msg’],

// 写法二 用对象接收，可以限定接收的数据类型、设置默认值、验证等

props:{

msg:{

type:String,

default:‘这是默认数据’

}

},

mounted(){

console.log(this.msg)

},

}

2. .sync

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

// Parent.vue

3. v-model

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

// Parent.vue

4. ref

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

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

// Child.vue

export default {

data(){

return {

name:“沐华”

}

},

methods:{

someMethod(msg){

console.log(msg)

}

}

}

// Parent.vue

5. $emit / v-on

子组件通过派发事件的方式给父组件数据，或者触发父组件更新等操作

// Child.vue 派发

export default {

data(){

return { msg: “这是发给父组件的信息” }

},

methods: {

handleClick(){

this.$emit(“sendMsg”,this.msg)

}

},

}

// Parent.vue 响应

// 或 简写

<child @sendMsg=“getChildMsg”>

export default {

methods:{

getChildMsg(msg){

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

}

}

}

6. listeners

多层嵌套组件传递数据时，如果只是传递数据，而不做中间处理的话就可以用这个，比如父组件向孙子组件传递数据时

$attrs：包含父作用域里除 class 和 style 除外的非 props 属性集合。通过 this.attrs"

$listeners：包含父作用域里 .native 除外的监听事件集合。如果还要继续传给子组件内部的其他组件，就可以通过 v-on=“$linteners”

使用方式是相同的

// Parent.vue

</template

export default{

data(){

return {

name:“沐华”

}

}

}

// Child.vue

// 继续传给孙子组件

export default{

props:[“name”], // 这里可以接收，也可以不接收

mounted(){

// 如果props接收了name 就是 { title:1111 }，否则就是{ name:“沐华”, title:1111 }

console.log(this.$attrs)

}

}

7. parent

$children：获取到一个包含所有子组件(不包含孙子组件)的 VueComponent 对象数组，可以直接拿到子组件中所有数据和方法等

$parent：获取到一个父节点的 VueComponent 对象，同样包含父节点中所有数据和方法等

// Parent.vue

export default{

mounted(){

this.$children[0].someMethod() // 调用第一个子组件的方法

this.$children[0].name // 获取第一个子组件中的属性

}

}

// Child.vue

export default{

mounted(){

this.$parent.someMethod() // 调用父组件的方法

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
s">

export default{

props:[“name”], // 这里可以接收，也可以不接收

mounted(){

// 如果props接收了name 就是 { title:1111 }，否则就是{ name:“沐华”, title:1111 }

console.log(this.$attrs)

}

}

7. parent

$children：获取到一个包含所有子组件(不包含孙子组件)的 VueComponent 对象数组，可以直接拿到子组件中所有数据和方法等

$parent：获取到一个父节点的 VueComponent 对象，同样包含父节点中所有数据和方法等

// Parent.vue

export default{

mounted(){

this.$children[0].someMethod() // 调用第一个子组件的方法

this.$children[0].name // 获取第一个子组件中的属性

}

}

// Child.vue

export default{

mounted(){

this.$parent.someMethod() // 调用父组件的方法

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-Atjr9WAy-1715660468151)]

[外链图片转存中…(img-99Ox3gtq-1715660468151)]

[外链图片转存中…(img-QQo52SjG-1715660468152)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！