Vue3组件通讯六种方式

目前最常用是props/$emit 和 vuex/pinia ,接下来是 provide/inject,其他不建议使用;
实际项目中，简单父子组件传递采用props/$emit ，涉及全局共享的数据一般采用 vuex/pinia 结合存储对象localStorage/sessionStorage使用

1.props/$emit

1.props 单向数据流，父组件向子组件传递数据，不允许子组件修改props
2.支持传递静态或者动态prop，支持多种数据类型，包含数组，复杂对象
3.支持prop验证类型检查

静态prop

  //不加冒号

动态prop

传递对象所有property

post: {
  id: 1,
  title: 'My Journey with Vue'
}

类型检查校验

app.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 值会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组的默认值必须从一个工厂函数返回
      default() {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator(value) {
        // 这个值必须与下列字符串中的其中一个相匹配
        return ['success', 'warning', 'danger'].includes(value)
      }
    },
    // 具有默认值的函数
    propG: {
      type: Function,
      // 与对象或数组的默认值不同，这不是一个工厂函数——这是一个用作默认值的函数
      default() {
        return 'Default function'
      }
    }
  }
})

子组件通过自定义事件传递给父组件

子组件

2.Vuex/Pinia

vuex 是针对vue的一个状态管理插件，vue3 匹配vuex4，vue2匹配vuex 3的版本，包含六个核心概念：state getter mutations actions modules

• actions 可以包含任意异步操作, mutations 是同步操作，modules为了分割大状态
  主要针对多个组件共享状态时：
• 多个视图组件依赖统一状态
• 来自不同的视图的行为需要变更同一状态

1.定义state数据

import { createStore } from 'vuex'
interface User{
    name:string,
    age:number,
    status:boolean
}
const usersModule = {
    state: () => ({
        users :[{
            name: 'test111',
            age: 231,
            status: true,
        }],
    }),
    getters: {
        getActiveUsers:(state) => {
            return state.users.filter(user => user.status);
        },
    },
    mutations: {
        addUser(state,user:User){
            state.users.push(user);
        }
    },
    actions: {
        addUser(context,user:User){
            context.commit('addUser',user)
        }
    },

}
export const vueStore = createStore({
    modules: {
        users: usersModule,
    }
})

2. 绑定实例全局

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
app.use(vueStore)
···

3.组件使用

Pinia 是 Vue 的存储库，也是为了实现跨组件/页面共享状态，但是Pinia 提供了一个更简单的 API，具有更少的仪式，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持；

1.创建Pinia实例

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

2. 定义状态数据

import { defineStore } from 'pinia'

interface User{
    name:string,
    age:number,
    status:boolean
}

export const useUsersStore = defineStore({
    id: 'todo',
    state: () => ({     //定义共享状态users
     users :[{
         name: 'test1',
         age: 23,
         status: true,
     }]
    }),
    getters: {   //主要用于读取数据，默认是响应式的
        getActiveUsers(state){
            return state.users.filter(user => user.status)
        }
    },
    actions: { //主要用于更新数据
        addUser(user:User){
            this.users.push(user);
        }
    },

})

3.在组件/页面中使用

Vuex与Pinia 默认存储在浏览器内存中，可以其它存储 比如localStorage/sessionStorage
推荐使用Pinia，更加简单便捷，只提供三个概率state，getters和 actions，据说Pina已经实现了Vuex5 规划的大部分内容

3.provide/inject

主要适合父子组件，父和子孙组件通讯, 可以看作是长距离的 prop，支持在setup()中使用

• 父组件不需要知道哪些子组件使用了它 provide 的 property
• 子组件不需要知道 inject 的 property 来自哪里

使用inject

当需要支持响应式注入，只需要在provide值使用ref 或着reactive

...
 setup() {
    const location = ref('North Pole')
    const geolocation = reactive({
      longitude: 90,
      latitude: 135
    })

    provide('location', location)
    provide('geolocation', geolocation)
  }
...

4. 内置属性 ref/$refs $children/$parent $attrs $listeners

• ref 用于引用子组件，this.$refs 指向子组件
• $children Vue3 已经废弃不支持了，采用$refs 方式
• $attrs 现在包含了所有传递给组件的 attribute，包括 class 和 style
• $listeners 对象在 Vue3 中已被移除。事件监听器现在是 $attrs 的一部分

子组件：

$attrs 方式：

如果这个组件接收一个 id attribute 和一个 v-on:close 监听器，那么 $attrs 对象现在将如下所示:

{
  id: 'my-input',
  onClose: () => console.log('close 事件被触发')
}

应该尽量避免在