Vue3 的 7 种和 Vue2 的 12 种组件通信(2)，【深入浅出】

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

父子组件通信