vue3-02-vue3中的组件通信

目录

• 组件通信
• • 一、vue3组件通信和vue2的区别
  • 二、父子通信
  • • [2.1 props通信](#2.1 props通信)
    • • 1）父→子传递数据（父组件向子组件传递数据）
      • 2）子→父传递数据
    • [2.2 v-model](#2.2 v-model)
    • • 1）v-model的本质
      • 2）给modelValue起别名
      • [3）event](#3）event)
    • [2.3 父子修改对方的数据](#2.3 父子修改对方的数据)
    • • 1）父修改子的数据
      • 2）子修改父的数据
  • [三、 祖孙通信](#三、 祖孙通信)
  • • [3.1 $attrs](#3.1 $attrs)
    • [3.2 provide、inject](#3.2 provide、inject)
  • [四、 任意组件之间通信](#四、 任意组件之间通信)
  • • [4.1 mitt](#4.1 mitt)
    • [4.2 pinia](#4.2 pinia)
    • • [1. 搭建pinia环境](#1. 搭建pinia环境)
      • [2. 存储数据](#2. 存储数据)
      • • 写法一：选项式
        • 写法二：组合式
      • [3. 读取 / 使用数据](#3. 读取 / 使用数据)
      • [4. 修改数据](#4. 修改数据)
      • [5. 补充](#5. 补充)

该篇内容是我看b站尚硅谷vue3视频总结的，内容仅是我自己总结使用，所以可能有错误和不完善的地方

组件通信

一、vue3组件通信和vue2的区别

常见搭配形式：

二、父子通信

父子通信的方法有3种：

• props
• v-model
• refs、parent

2.1 props通信

1）父→子传递数据（父组件向子组件传递数据）

2）子→父传递数据

1. 利用参数传值
   注意：下图中传参的方式，父组件把sendToy参数传给子组件，当一点击子组件的button，toy就会传给sendToy，父组件的sendToy触发getToy函数，getToy函数里的value就是我们传递的toy
   

自定义事件

上述中儿子给父亲传值，利用参数传值太麻烦，可以借助自定义事件来实现

注意，参数传值用的是冒号：，事件用的是@

利用自定义事件

上诉例子利用自定义事件来写：

2.2 v-model

概述： 实现父 ↔ 子之间相互通信
v-model和props的区别：

• v-model是父子之间控制同一个数据，且这个数据是双向绑定的，其中一方修改另一方会自动修改
• props是向对方传递自己的数据，例如父组件把自己的car传递给子组件

1）v-model的本质

Father.vue

v-model用在组件标签上，子组件接收并向父组件发送数据，完成双向绑定：

Child.vue

2）给modelValue起别名

• 父组件引入子组件标签，在子组件标签上通过modelValue进行传值，子组件接收也是通过modelValue接收
• 但是有时候我们传值的时候，参数名不想用modelValue，可以通过下列方式，给modelValue起别名
• 起别名还有另外一个重要作用：可以v-model绑定多个数据

Father.vue

Child.vue

3）$event

2.3 父子修改对方的数据

1）父修改子的数据

1. 父单独修改某个子组件的数据

注意：

• ref 用在普通DOM标签上，获取的是DOM节点
• ref 用在组件标签上（如下例），获取的是组件实例对象
  

2. 父一下子修改所有子组件的数据
   注意：$refs 可以用于获取父组件的所有子组件的实例对象
   

2）子修改父的数据

注意：$parent 可以获取子组件的父组件

三、 祖孙通信

有两种方法：

1.$attrs

2.provide、inject

3.1 $attrs

说明：

• 组件关系说明：祖、父、孙（爷爷、爸爸、孙子）
• 想要通过$attrs实现祖→孙通信，必须借助父组件
• 祖把数据传给父，被父组件接收的值在props中，未被接收的值在 a t t r s 中，父组件把 attrs中，父组件把 attrs中，父组件把attrs中的值传给孙，孙接收数据

举例：

3.2 provide、inject

概述： 实现祖孙组件之间直接通信

和$attrs的区别：

• $attrs需要借助父组件，而且父如果接收祖传的数据，那么这个数据孙就接收不到了
• provide、inject可以实现祖孙之间直接通信，不需要借助父组件
• 祖（爷爷）组件中provide提供的数据，所有后代（包括父、孙、重孙...）都可以接收
  使用步骤：
• 在祖（爷爷）组件中通过provide配置向后代组件提供数据
• 在后代组件中通过inject配置来声明接收数据
  举例：
  

四、 任意组件之间通信

任意组件之间的通信有两种方法：

• mitt
• pinia

4.1 mitt

概述： 与消息订阅与发布（pubsub）功能类似，可以实现任意组件间通信
说明： 相当于有了一个第三方，双方借助这个第三方进行通信
使用步骤：

1.安装mitt：npm install mitt

2.配置src/utils/emitter.ts

3.提供数据的组件：在合适的时候触发事件，然后提供数据

4.接受数据的组件：绑定事件，同时在销毁前解绑事件

举例：（注意每个组件中都要引入第三方，也就是emitter）

4.2 pinia

1. 搭建pinia环境

注意：pinia相当于vue2中的vuex，是状态管理工具

2. 存储数据

用法：（两种写法）

写法一：选项式

count.ts

// 引入defineStore用于创建store
import {defineStore} from 'pinia'

// 定义并暴露一个store
export const useCountStore = defineStore('count',{

  // 状态---相当于data
  state(){
    return {
      sum:6
    }
  },
  // 动作---相当于methods
  actions: {
    increament(value:number) {
      if(value < 10) {
        this.sum += value
      }
    }
  },
  // 计算---相当于computed
  getters: {
    sumAll(state) {
      return this.sum + this.tall + this.age
    }
  }
})

写法二：组合式

import { defineStore } from "pinia"
import axios from 'axios'
import {nanoid} from 'nanoid'

// 选项式
// export const useTalkStore = defineStore('loveTalk', {
//   state() {
//     return {
//       talkList: JSON.parse(localStorage.getItem('talkList') as string) || []
//     }
//   },
//   actions: {
//     async getTalk() {
//     // 发请求，下面这行的写法是：连续解构赋值+重命名
//     let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
//     // 把请求回来的字符串，包装成一个对象
//     let obj = {id:nanoid(),title}
//     // 放到数组中
//     this.talkList.unshift(obj)
//     }
//   }
// })

// 组合式
import {reactive} from 'vue'
export const useTalkStore = defineStore('loveTalk', () => {
  const talkList = reactive(JSON.parse(localStorage.getItem('talkList') as string) || [])

    async function getTalk() {
    // 发请求，下面这行的写法是：连续解构赋值+重命名
    let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
    // 把请求回来的字符串，包装成一个对象
    let obj = {id:nanoid(),title}
    // 放到数组中
    this.talkList.unshift(obj)
    }

    return { talkList, getTalk}
})

3. 读取 / 使用数据

count.vue读取count.ts中的数据 --- 使用state、actions、getters里的数据，使用$subscirbe()监视state里的数据变化

count.ts

import { defineStore } from "pinia"
export const useCountStore = defineStore('count', {
  state() {
    return {
      sum: 0,
      tall: 100,
      age: 18
    }
  },
  actions: {
    increament(value:number) {
      if(value < 10) {
        this.sum += value
      }
    }
  },
  // getters:相当于计算属性
  getters: {
    sumAll(state) {
      return this.sum + this.tall + this.age
    }
  }
})

count.vue

<h2>当前求和为：{{ sum }}，tall:{{ tall }}，Age：{{ age }}，所有总和为:{{ sumAll }}</h2>
<button @click="add">加</button>
<button @click="minus">减</button>
...
  import { ref } from "vue"
  import {useCountStore} from '@/store/count'
  import { storeToRefs } from 'pinia'
  
  
  // *********使用state里的数据   --  在html标签里通过{{ XXX }}使用即可*************
  const countStore = useCountStore()
  // 这里不用toRefs的原因是：如果使用toRefs，则countStore里的所有数据，包括state、actions、getters全部变为响应式数据了，storeToRefs只会将数据做转换
  const { sum, tall, age, sumAll } = storeToRefs(countStore) // 把countStore里的sum, tall, age, sumAll转为响应式数据
  
  
  // **********使用actions里定义的函数*********************
  function add(){
    countStore.increament(n.value)
  }
  
  
    // **************使用getters里面的数据*******************
    // 我们在上面已经通过const { sum, tall, age, sumAll } = storeToRefs(countStore)引入了sumAll，在html标签里可以像state里的数据一样使用   
    
    // 通过store的$subscribe()方法监听state及其变化
    countStore.$subscribe(() => {
    console.log('state里的数据发生变化了')
  })

4. 修改数据

三种方法：

  function add(){
    // 第一种方法 -- 单个数据，直接修改
    countStore.sum += n.value
    // 第二种方法 -- 多个数据，批量修改
    countStore.$patch({
       sum: 200,
       tall: 180,
       age: 80
     })

    // 第三种方法  --  使用actions里定义的函数（actions中可以编写一些业务逻辑）
    countStore.increament(n.value)
  }

5. 补充

nanoid安装命令：npm install nanoid

作用：生成唯一值

引入：import {nanoid} from nanoid

使用：let obj = { id：nanoid()，name：'张三'，age：18 }