Vue3的组件通信汇总

目录

自定义属性props（父向子）

自定义事件（子向父）

ref获取子组件实例

$parent获取父组件实例

作用域插槽向父组件传值

兄弟组件传值

父子双向数据绑定

useAttrs获取父组件传来的属性和事件

深层组件传值

Pinia实现任意组件之间通信

---

• 首先，我们要明白，数据流是自顶向下的，也就是说，只能上层的修改下层的，不能下层的修改上层的(正确的做法，应该是下层的通知上层的，让上层的去修改)

自定义属性props（父向子）

• 可以用于父向子传值

• vue3中，子组件用 defineProps这个hook来接收父组件传来的数据。可以是一个数组，也可以是一个对象

• defineProps不需要导入，defineProps接收到的数据，可以直接进行使用

父组件

子组件

自定义事件（子向父）

可以用于子向父传值

1. 子组件通过emit向父组件传递一个自定义事件

2. 父组件，在子组件标签上接收自定义事件，并声明处理函数

子组件

父组件

补充：vue2和3的自定义事件

• 在vue2中，如果在组件标签上写click，mouseEnter，focus等等这些原生的事件，它会以为就是自定义事件，不会以为是原生事件。如果想要它以原生的事件执行，则需要添加.native修饰符

<组件名 @click.native = 'handleClick'>

• 而vue3，如果绑定原生事件，它就会以为就是原生事件。只要在子组件内，条件满足就会触发

<组件名 @click = 'handleClick'>

ref获取子组件实例

• ref 可以获取真实的DOM节点，也可以获取组件实例。获取子组件实例后，就可以通过子组件实例，直接修改和使用子组件定义的变量，也可以直接调用子组件的方法

• 组件内部的数据是封闭保护的，如果向让外界使用，可以使用defineExpose这个hook进行暴露

父组件

子组件

$parent获取父组件实例

• 可以在子组件中通过$parentz这个参数获取父组件的实例

• 组件内部的数据是封闭保护的，如果向让外界使用，可以使用defineExpose这个hook进行暴露

子组件

父组件

作用域插槽向父组件传值

• 子组件可以利用作用域插槽向父组件传值

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

子组件

父组件

兄弟组件传值

可以利用第三方插件 mitt 实现

首先进行安装

yarn add mitt

使用：

1. 在src目录下创建一个bus的文件夹，里面创建一个mitt.js的文件。（文件名随便起）

import mitt from 'mitt'

const emitter = mitt()

export default emitter

1. 发送方：导入mitt.js并用emit发送数据

1. 接收方：导入mitt.js并用on接收兄弟组件发来的数据

父子双向数据绑定

使用 v- model 进行父子组件之间的双向数据绑定

• v-model不光用在表单上，也可以用在组件上。用在组件上绑定值后，子组件只需要defineProps接收即可

• v-model用在组件上，默认就是v-model:modelValue，也就是默认绑定modelValue

• 组件上可以通过v-model传递多个值

父组件

子组件

这只是单纯的父向子传递了数据，如果子组件想要修改，则还需要向父组件发送自定义事件，通知父组件进行修改

实现父子通信

父组件

子组件

useAttrs获取父组件传来的属性和事件

• 可以获取到父组件传递过来的属性和事件

• 没有被definedProps声明接收的，都会被useAttrs兜底接收

父组件

子组件

封装第三方的组件时

• 可以用v-bind绑定$attrs对象。多用于对第三方ui库的组件进行二次开发

也可以接收事件

深层组件传值

深层组件，就是有很多层的嵌套关系。类似于祖先和子孙的关系

使用 provide  和  inject  进行深层组件的传值

• 祖先组件通过provide这个hook向子孙组件提供数据。它下面的所有子孙组件都可以使用提供的数据

• 子孙组件通过inject这个hook接收祖先提供的数据

祖先组件

中间组件

子孙组件

Pinia实现任意组件之间通信

• 核心：state，actions，getters

选项式用法

定义：

import { defineStore } from 'pinia'

let userInfoStore = defineStore('user', {
  state: () => {
    return {
      name: '张三',
    }
  },
  getters: {},
  actions: {
    changeName(name: String) {
      this.name = name
    },
  },
})

// 对外暴露
export default userInfoStore

使用：

组合式用法

定义：

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
})

export default useCounterStore

使用：