vue3+ts ----组件通信方式

vue3

组件通信

vue2组件通信方式：

1、props:可以实现父子组件、子父组件以及兄弟组件通信

2、自定义事件：可以实现子父组件通信

3、全局事件总线$bus：可以实现任意组件通信

4、pubsub:发布订阅模式实现任意组件通信

5、vuex：集中式状态管理容器，实现任意组件通信

6、ref:父组件获取子组件实例VC，获取字符集的响应式数据以及方法

7、slot插槽：（默认插槽、具名插槽、作用域插槽）实现父子组件通信

vue3组件通信

1、props

可以实现父子组件通信，在vue3中可以通过defineProps获取父组件传递的数据，并且在组件内部不需要引入defineProps方法可以直接使用。

2、自定义事件

原生dom事件
[外链图片转存中…(img-njoXGYNR-b0d21d47c39871cebd9d1b7208.png#pic_center)

vue2与vue3在组件标签上绑定事件的区别

事件委派：把原本需要绑定在子元素的响应事件（click、keydown……）委托给父元素，让父元素担任监听的职务。事件委托的原理是DOM元素的事件冒泡

vue3中没有组件实例，无法使用this，而是利用defineEmits方法返回函数触发自定义事件，defineEmits方法同样不需要引入

defineEmits方法执行会返回一个箭头函数，这个函数会触发自定义事件

触发自定义事件，也可以直接这么写

<button @click="$emit('fn',123,456)">点击触发自定义事件2</button>

3、全局事件总线

全局事件总线可以实现任意组件通信，在vue2中可以根据VM与VC关系推出全局事件总线。但是在vue3中没有Vue构造函数，也就没有Vue.prototype.以及组合式API写法没有this,那么在Vue3想实现全局事件的总线功能就有点不现实啦，如果想在Vue3中使用全局事件总线功能可以使用插件mitt实现。

mitt插件，在npm官网搜索mitt，有下载使用mitt的文档介绍

4、v-model

v-model:收集表单数据，数据双向绑定，也可以实现组件之间通信，实现父子组件数据同步的业务

1、父组件通过props传递数据，
2、子组件通过自定义事件给父组件传递数据，
3、父组件在事件中修改数据
以上实现父子组件数据同步的方法就等同于在组件标签上使用v-model

v-model 默认绑定的属性名为：modelValue
v-model 默认绑定的事件名为：update:modelValue

自定义 v-model 绑定的名称,且可以绑定多个v-model

<Child1 v-model:name="name" v-model:num="num"></Child1

<script setup lang="ts">
  let props = defineProps(['num','name'])
  console.log(props);
</script>

自定义v-model绑定的名称：  v-model:名称="名称"
自定义事件名：   update:名称

5、useAttrs

vue3框架提供了useAttrs方法，可以获取组件身上的属性和事件
1、props和useAttrs都可以接收父组件传递的属性属性值
2、props的优先级比useAttrs高，如果使用了props，useAttrs就接收不到了
3、useAttrs相当于vue2中的$attrs，但是优于$attrs，因为useAttrs不仅可以获取属性，还能接收原生dom事件与自定义事件

6、ref与$parent

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

7、provide与inject

peovide()提供数据，inject()注入数据，可以用实现隔辈组件之间传递数据。

8、pinia

vuex和pinia都是集中式管理状态容器，实现任意组件之间的通信。
1）vuex核心概念：state（存储数据）、mutations（唯一可以修改数据）、actions（处理异步）、getters（计算属性）、modules（模块化）。
2）pinia核心概念：state、actions（修改数据、处理异步）、getters

pinia的写法：选择式API、组合式API
一、选择式API
1）src/store/index.ts 创建大仓库

import { createPinia } from 'pinia' // 创建大仓库

let store = createPinia() // createPinia()创建大仓库

export default store;  // 对外暴露 安装仓库

2)在入口文件main.ts中引入仓库

//引入仓库
import store from './store'
app.use(store)

3）在src/store/modules中定义小仓库，大仓库管理小仓库

// defineStore用于定义小仓库
import  { defineStore } from 'pinia'

// defineStore接收两个参数
// 第一个参数：小仓库的名字；第二个参数：小仓库的配置对象

// defineStore方法执行会返回一个函数，函数的作用就是让组件可以获取到仓库的数据
let userInfoStore = defineStore('info',{
    // state存储数据，vuex是对象写法，而pinia是函数的形式，函数返回的结果这个对象才是给组件提供的数据
  state:() => {
      return {
          count:888
        }
  },
  actions:{

  },
  getters:{

  }
})

// 对外暴露方法
export default userInfoStore;

4）在组件中使用仓库数据

二、组合式API
主要用到的是vue中的组合式api函数ref，computed等

9、插槽

插槽分为：默认插槽、具名插槽、作用域插槽。