vue3组件通信方式总结（setup语法糖）

vue3组件之间的通信方式常用七种：props、$emit、expose/ref、$attrs、v-model、provide/inject、vuex

1. props

// Parent.vue 传送



// Child.vue 接收

2. $emit

// Child.vue 派发



// Parent.vue 响应

3.expose / ref
父组件获取子组件的属性或者调用子组件方法

// Child.vue


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

 4. 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
// 方法一 直接使用


// 方法二 获取