vue3组件通信的方式

一、父组件给子组件传值

父组件中如何传：

在子组件标签体内写上要传递的数据，:text1="text1"，是动态绑定要传递的数据

子组件中如何接：

使用defineProps

父组件如何接：

 三、全局事件总线（适合不相干组件间通信）

1.先引入mitt包，注册全局事件总线$bus

文件位置

 index.ts中的代码：

import mitt from 'mitt'
const $bus = mitt()
export default $bus

2.接收数据的组件中如何使用全局事件总线

四、v-model实现组件通信

使用v-model进行组件通信相当于使用了props[modelValue] + 自定义事件 update:modelValue。

情况一：传递单个参数

情况二：传递多个参数

五、useAttrs方法

useAttrs方法用来获取组件身上的属性和方法，在父组件给子组件传参时，如果子组件没有使用props接受，那么父组件传递过来的参数就会存放到useAttrs中。如果使用props接受了父组件传递过来的一个参数，那么useAttrs就无法接受到该参数。

子组件：HintButton

父组件：

六、ref与$parent

ref：可以获取到真实的dom节点，可以获取到子组件的实例VC
$parent：可以在子组件内部获取到父组件的实例

父组件：

子组件：

七、provide与inject

vue3提供provide与inject的方法，可以实现祖孙组件之间的传参,也可以父传子。

provide是一个方法provide(a，b)，它有两个参数，第一个是提供的数据key，第二个是祖先组件提供的数据；inject也是一个方法，它的参数是祖先组件提供的key，inject(a)。通过provide与inject的方法进行传参时，传递的参数可以修改。

父组件：

子组件：

孙组件：

八、pinia

pinia是集中式管理状态容器，可以实现任意组件之间通信

核心概念：state、actions、getters

准备工作：

安装依赖：npm install pinia

创建大仓库：src/store/index.ts

// 创建大仓库
import { createPinia } from "pinia";
//createPinia 方法用于创建大仓库
let store = createPinia();
//对外暴露，安装仓库
export default store;

在 main.ts 中全局注册

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
//这里导入仓库
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

 （1）组合式API的写法

创建小仓库：src/store/modules/todos.ts  里面存放组合式API的pinia数据

//定义组合式API仓库
import { defineStore } from 'pinia'
import { ref,computed } from 'vue'
//创建小仓库
const useTodoStore = defineStore('todo',()=>{
        let todos = ref([
            {id: 1, title: '吃饭'},
            {id: 2, title: '睡觉'},
            {id: 3, title: '打豆豆'}
        ] as any)
        let arr = ref([1,2,3])

        const total = computed(() => {
            return arr.value.reduce((pre,next) => {
                return pre + next
            },0)
        })
        //这里务必要返回一个对象：属性与方法可以提供给组件使用
        return { 
            todos,//相当于state
            total,//相当于getters
            updateTodo() { //相当于actions
                todos.value.push({ id: 4,title: '组合式API'})
            }
        }
})
export default useTodoStore

父组件：

子组件1：Child1

如果要在pinia中添加新数据，可以先在pinia中定义好变量，然后为这个变量赋值，就可以将想要保存的数据添加到pinia中。

（2）组合式API的写法

创建小仓库：src/store/modules/info.ts 

//定义info小仓库
import {defineStore} from 'pinia'
//第一个参数：小仓库名字 第二个参数：小仓库配置对象
//defineStore方法执行会返回一个函数，函数作用就是让组件可以获取到仓库数据
let useInfoStore = defineStore('info',{
    //存储数据：state
    state:()=>{
        return {
            count:99,
            arr: [1,2,3,4,5]
        }
    },
    //用于发送异步请求
    actions:{
        //注意：函数没有context上下文对象
        //没有commit、没有mutations去修改数据
        updateCount(a:number,b:number){
            //这里可以使用this
            this.count+=a
        }
    },
    //计算属性
    getters:{
        total(){
            let result:number = this.arr.reduce((pre,next)=>{
                return pre + next
            },0)
            //一定要有return返回值
            return result
        }
    }
})
//对外暴露方法
export default useInfoStore

父组件

子组件1：

子组件2：

父组件:

（2）作用域插槽的使用方法

作用域插槽：就是可以传递数据的插槽，子组件可以将数据回传给父组件，父组件可以决定这些回传数据是以何种结构或者外观在子组件内部去展示。

父组件：

子组件：