vue3-02-vue3中的组件通信

目录

  • 组件通信
    • 一、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)子→父传递数据
  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 用在组件标签上(如下例),获取的是组件实例对象
    在这里插入图片描述
  1. 父一下子修改所有子组件的数据
    注意:$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 }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/397913.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用Python制作开心消消乐游戏|附源码

制作一个完整的“开心消消乐”风格的游戏在Python中是一个相对复杂的项目&#xff0c;因为它涉及到图形界面、游戏逻辑、动画效果以及用户交互等多个方面。不过&#xff0c;我可以为你提供一个简化的版本和概念框架&#xff0c;帮助你理解如何开始这个项目&#xff0c;并提供一…

英伟达元宇宙平台Omniverse的学习,技术调研

NVIDIA Omniverse™ 是一个基于 USD (Universal Scene Description) 的可扩展平台&#xff0c;可使个人和团队更快地构建自定义 3D 工作流并模拟大型虚拟世界。 Omniverse&#xff1a;三维设计协同、模拟的开发平台&#xff0c;实现3D实时渲染&#xff0c;RTX光线追踪技术 协…

职场英语培训柯桥外语学校学外语学英语到银泰泓畅学校

“工作量太大了”怎么说&#xff1f; 导致加班有一个非常大的因素就是&#xff1a; “工作量太大了&#xff01;” “ 注意&#xff1a;形容工作量太大不使用“big”一词&#xff0c;要用heavy&#xff0c;相应的要说工作量较小&#xff0c;可以用light. 工作量大/小 &…

数据中心互连的关键要素和核心技术

数据中心互连&#xff08;DCI&#xff09;依靠其关键要素和核心技术进行的高效、可靠和高速的连接&#xff0c;实现了数据中心跨区域连接的即时通信和数据交换&#xff0c;成为了现代数字通信基础设施的重要组成部分。从光模块和多路复用设备到网络协议和管理系统&#xff0c;D…

Leetcode75-5 反转字符串的元音字母

本质上来说就是反转字符串 一部分需要反转 一部分不动 思路: 1.用String字符串倒序拼接 就是过滤掉不是元音字符 然后把所有的字符&#xff08;非元音的直接复制过来 元音字母直接从反转的字符串里边复制即可&#xff09; 2.看了题解发现自己写的啰嗦了 就是一个双指针问题用…

酒店行业如何利用XML进行营销短信

随着信息社会的到来&#xff0c;消费者获得会所的服务也从单纯的电话方式&#xff0c;逐渐转变为电话、互联网、传真&#xff0c;群发短信等多种媒体并行的方式。今天着重介绍下酒店行业如何利用短信平台进行营销。 群发短信业务对酒店起到的效率&#xff1a;根据新产品或服务向…

java实现解析pdf格式发票

为了减少用户工作量及误操作的可能性&#xff0c;需要实现用户上传PDF格式的发票&#xff0c;系统通过解析PDF文件获取发票内容&#xff0c;并直接将其写入表单。以下文章记录了功能实现的代码。 发票样式 发票内容解析 引用Maven 使用pdfbox <dependency><groupI…

Spring Boot - 在Spring Boot中实现灵活的API版本控制(下)_ 封装场景启动器Starter

文章目录 Pre设计思路ApiVersion 功能特性使用示例配置示例 ProjectStarter Code自定义注解 ApiVersion配置属性类用于管理API版本自动配置基于Spring MVC的API版本控制实现WebMvcRegistrations接口&#xff0c;用于自定义WebMvc的注册逻辑扩展RequestMappingHandlerMapping的类…

前端CSS画图形

我以前一直很好奇&#xff0c;这些下拉菜单中的小箭头是怎么实现的&#xff0c;直到我看到了进阶的CSS。 OK&#xff0c;let me tell you hao to do. 想要实现这个效果&#xff0c;方法很多&#xff0c;我知道的就两个&#xff1a; 图片作弊法&#xff0c;CSS妙用法 图片作弊…

uni-app 开发App时调用uni-push 实现在线系统消息推送通知 保姆教程

一、引言 在开发App时避免不了需要推送系统通知&#xff0c;以提高用户的使用体验。在自己的一个工具型的小app上全流程接入了uni-push2.0的推送能力&#xff0c;做个记录&#xff0c;以防后期需要用到。在阅读本教程前最好先看看官方文档&#xff0c;结合官方文档使用&#xf…

下载免费设计素材,有这7个网站就够了

7个免费设计素材网站&#xff0c;这些网站提供了大量的免费资源&#xff0c;包括图片、字体、图标、模板等&#xff0c;涵盖了多种风格和主题&#xff0c;能够满足不同设计师和创作者的需求。无论是用于个人项目还是商业用途&#xff0c;这些网站都能给你提供丰富的选择&#x…

10步搞定Python爬虫从零到精通!

学习Python网络爬虫可以分为以下几个步骤&#xff0c;每一步都包括必要的细节和示例代码&#xff0c;以帮助你从零开始掌握这一技能。 第一步&#xff1a;理解网络爬虫基础 什么是网络爬虫&#xff1f; 网络爬虫是一种自动化程序,用来从互联网上收集数据.它通过发送 HTTP 请求…

【数据结构】五、树:7.哈夫曼树、哈夫曼编码

3.哈夫曼树和哈夫曼编码 文章目录 3.哈夫曼树和哈夫曼编码3.1带权路径长度3.2哈夫曼树的定义和原理3.3哈夫曼树的构造代码实现 3.4特点3.5哈夫曼编码压缩比代码实现 3.6哈夫曼树-C 3.1带权路径长度 #mermaid-svg-yeVKyVnDwvdIc5ML {font-family:"trebuchet ms",verda…

CSS 实现两边固定宽,中间自适应

0. **Flexbox 实现**&#xff1a; css复制代码.container { display: flex; } ​ .fixed { width: 200px; /* 两边固定宽度 */ } ​ .flexible { flex: 1; /* 中间自适应 */ } html复制代码<div class…

数据科学 - Sklearn库总结

1. 前言 通过上几章对数据预处理的理解&#xff0c;最后来到我们数据分析的核心之一&#xff0c;机器学习。 机器学习涵盖了许多方面&#xff0c;如若每一次处理都是通过手写代码的方式去处理我们的数据集是十分繁琐&#xff0c;复杂的。但在scikit-learn库中&#xff0c;提供…

带你彻底搞懂useLayoutEffect的使用场景

开篇第一句: useLayoutEffect 可能会影响性能。尽可能使用 useEffect。 useLayoutEffect 是 useEffect 的一个版本&#xff0c;在浏览器重新绘制屏幕之前触发。 使用方法 useLayoutEffect(setup, dependencies?)调用 useLayoutEffect 在浏览器重新绘制屏幕之前进行布局测量&…

lvs详解及实例配置

目录 1.什么是负载均衡 1.1为什么用负载均衡 1.2.负载均衡类型 1.2.1.四层负载均衡 1.2.2.七层负载均衡 1.3 四层和七层的区别 2.LVS介绍 2.1LVS 的优势与不足 2.2LVS 核心组件和专业术语 3.ipvsadm命令 4.LVS集群中的增删改 4.1.管理集群服务中的增删改 4.2.管理集…

用户态tcp协议栈四次挥手-服务端发送fin时,客户端不返回ac

问题&#xff1a; 四次挥手时&#xff0c;服务端发送fin后&#xff0c;客户端不发送ack&#xff0c;反而过了2min后发了个rst报文 62505是客户端&#xff0c;8889是服务端 解决&#xff1a; 服务端返回fin报文时带上ack标记

数据结构(邓俊辉)学习笔记】优先级队列 03——完全二叉堆:结构

文章目录 1.完全二叉树2.结构性3.形神具备4.堆序性 1.完全二叉树 在上一节我们看到&#xff0c;就优先级队列的实现方式而言&#xff0c;采用基本的向量结构并不足够&#xff0c;而采用更高级的树形结构&#xff0c;虽然完全可以高效率地实现优先级队列&#xff0c;但却有杀鸡…

Codeforces Round 961 【C. Squaring】

C. Squaring 题目大意&#xff1a; 给你一个长度为n的数组&#xff0c;求最少次操作&#xff0c;使得数组&#xff08;非严格&#xff09;递增。一次操作&#xff1a;Ai 变为 Ai^2。 不可能实现输出-1。 关键思路&#xff1a; 分子分母同时取对数&#xff0c;比值不变。 …