目录
- 组件通信
- 一、vue3组件通信和vue2的区别
- 二、父子通信
- 2.1 props通信
- 1)父→子传递数据(父组件向子组件传递数据)
- 2)子→父传递数据
- 2.2 v-model
- 1)v-model的本质
- 2)给modelValue起别名
- 3)$event
- 2.3 父子修改对方的数据
- 1)父修改子的数据
- 2)子修改父的数据
- 三、 祖孙通信
- 3.1 $attrs
- 3.2 provide、inject
- 四、 任意组件之间通信
- 4.1 mitt
- 4.2 pinia
- 1. 搭建pinia环境
- 2. 存储数据
- 写法一:选项式
- 写法二:组合式
- 3. 读取 / 使用数据
- 4. 修改数据
- 5. 补充
该篇内容是我看b站尚硅谷vue3视频总结的,内容仅是我自己总结使用,所以可能有错误和不完善的地方
组件通信
一、vue3组件通信和vue2的区别
常见搭配形式:
二、父子通信
父子通信的方法有3种:
- props
- v-model
- $refs、$parent
2.1 props通信
1)父→子传递数据(父组件向子组件传递数据)
2)子→父传递数据
- 利用参数传值
注意:下图中传参的方式,父组件把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)父修改子的数据
- 父单独修改某个子组件的数据
注意:
- ref 用在普通DOM标签上,获取的是DOM节点
- ref 用在组件标签上(如下例),获取的是组件实例对象
- 父一下子修改所有子组件的数据
注意:$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',{// 状态---相当于datastate(){return {sum:6}},// 动作---相当于methodsactions: {increament(value:number) {if(value < 10) {this.sum += value}}},// 计算---相当于computedgetters: {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 }