Vue3的组件通信

1. props

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

方法一：混合写法

// Parent.vue 传送



// Child.vue 接收

方法二：纯 Vue3 写法(语法糖)

// Parent.vue 传送



// Child.vue 接收

**注意：

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

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

官方也说了，既然用了 3，就不要写 2 了，所以不推荐混合写法。下面的例子，一律只用纯 Vue3 的写法，就不写混合写法了**

2. $emit

    // Child.vue 派发
    
    
    // Parent.vue 响应
    
    

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

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


// 方法二 获取