Vue3学习与实战 · 组件通信

在使用Vue3构建中大型web应用时， 组件通信 肯定是不可避免的。本文就具体介绍一下使用Vue3的 props、 \(emit、expose / ref、\)attrs、v-model、provide / inject、Vuex、mitt 等方式进行组件通信。

1.props

用 props 传数据给子组件有两种方法，如下

1. 混合写法：Option API + setup

// Parent.vue 传参  

  

// Child.vue 接收
  

2. 纯 Vue3 写法：Composition API（ // Child.vue 接收

   注意：

   • 如果父组件是混合写法，子组件纯 Vue3 写法的话，是接收不到父组件里 data 的属性，只能接收到父组件里 setup 函数里传的属性。
   • 如果父组件是纯 Vue3 写法，子组件混合写法，可以通过 props 接收到 data 和 setup 函数里的属性，但是子组件要是在 setup 里接收，同样只能接收到父组件中 setup 函数里的属性，接收不到 data 里的属性。
   • 官方推荐纯 Composition API（ // Parent.vue 响应

     3.expose / ref

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

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

     4.attrs

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

     // Parent.vue 传参  
       
     
     
     // Child.vue 接收  
     
     

     5.v-model

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

     // Parent.vue  
       
     
     
     // Child.vue  
       
     
     

     6.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  
     // 方法一 直接使用  
     
     
     // 方法二 获取  
     
     

     详细事例可参考：Vuex状态管理

     8.mitt

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

     先安装 mitt.js

     npm i mitt -S
     

     然后像以前封装 EventBus 一样，封装：

     // mitt.js  
     import mitt from 'mitt'  
     const mitt = mitt()  
     export default mitt  
     

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

     // 组件 A  
     
     
     // 组件 B   
     
     

     ---

     《Vue3学习与实战》系列

     • Vue3学习与实战 · 组件通信（本文）
     • Vue3学习与实战 · 全局挂载使用Axios
     • Vue3学习与实战 · 配置使用vue-router路由
     • Vue3学习与实战 · Vuex状态管理
     • vue3 + vite实现异步组件和路由懒加载
     • Vite+Vue3+Vant快速构建项目

     ---

     欢迎访问：天问博客