vue3组件传值---vue组件通过属性,事件和provide,inject进行传值

通过属性传值(父传子)

        vue的组件具有props自建属性(自定义名称,类似于class,id的属性),通过这个属性,父组件可以向子组件传递参数,从而实现组件之间的信息传递,

在子组件(myComponent.vue)中设置

<script setup>//组合式API//自建属性 父组件给子组件传值
const props = defineProps({title : String,num : Number
});
console.log(props.title,props.num);
</script>

这里设置了两个属性,一个title字符串值,一个num数字值,

在父组件(App.vue)中


<script setup>
import myComponent from './components/myCompenent.vue'
import { ref } from 'vue';
const num = ref(0);
</script><template><myComponent  title="我的组件" :num= 'num'/>
</template>

注意num应该使用模板语法(v-bind:num或:num),否则num无法被识别为数字,而是默认为字符串

然后启动项目,可以在控制台上看到传递的参数

通过事件传值(子传父)

vue组件可以自建事件,由父组件监听,并接受参数,通过这个参数,父组件可以收到来自子组件的信息

在子组件(myComponent.vue)中设置

<script setup>//组合式API
import { ref } from 'vue';
// 响应式状态
const count = ref(0);//自建事件 子组件向父组件传值
const emit = defineEmits(["changeNum"])function add(){count.value++;emit("changeNum",count.value);//触发changeNum事件,传递count.value
}
</script><template><button @click="add">count={{ count }}</button><!-- 这里的count自动被浅层解包 即count=count.value -->
</template>

在父组件(App.vue)中

<script setup>
import { ref } from 'vue';
import myComponent from './components/myCompenent.vue'const num = ref(0);
function changeNum(count) {console.log("子组件传递的值:",count);
}</script><template><myComponent  title="我的组件" :num= 'num' @changeNum="changeNum" /></template>

        事件流程:每点击一次子组件中的按钮执行add函数,add函数会触发事件changeNum,使count自增,并传递出这个count,父组件中监听到事件changeNum,执行changeNum函数并接受子组件传递的值打印在控制台上

这样我们就完成了子组件向父组件传值

provide,inject传值(父传子)

vue3中新增了provide和inject方法,在上面两种方法中,只能在相邻的组件中传递信息,例如,A->B->C,A和C想要传递信息,就必须要通过B,而使用provide,inject传值的方式可以跳过B直接进行传递,不过这种方式只能由父组件传递给子组件

在子组件中(newComponent.vue)

<script setup>//组合式API
import { inject } from 'vue';
const msg = inject("msg");//接受信息</script><template><p>{{ msg }}</p></template>

在父组件中 (App.vue)

<script setup>import newComponent from './components/newComponent.vue'import { ref,provide } from 'vue';const msg = provide("msg","向子组件传递的信息");//只能有父组件向子组件传</script><template><newComponent/><template>

provide(key,value),有两个参数,一个是传递值的key(字符串),另一个是value(任意值)

inject(key),有一个参数,接收值的key(字符串)

它们都只能在setup函数或setup的script标签中使用,返回值都是响应式类型

关于响应式可以参考:

vue响应式API,ref和reactive的使用-CSDN博客

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

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

相关文章

Django模块连接redis

1 安装django-redis pip3 install django-redis 2、配置settings.py CACHES{"default":{"BACKEND":"django_redis.cache.RedisCache","LOCATION":"redis://"redis_host":"redis_port, #redis主机…

CSDN UI 2024.06.01

当我们的栏目很多的时候&#xff0c;通过【置顶】来排列顺序是很麻烦的&#xff0c;应该加一列&#xff0c;设置优先级别。太难用了 或者加两个按钮【上移】 【下移】

Spring Boot(七十六):集成Redisson实现布隆过滤器(Bloom Filter)

之前在redis(17):什么是布隆过滤器?如何实现布隆过滤器?中介绍了布隆过滤器,以及原理,布隆过滤器有很多实现和优化。之前我们讲解了由 Google 开发著名的 Guava 库实现布隆过滤器(Bloom Filter)。下面我们讲解基于Redisson实现布隆过滤器。 1 Redisson简介 Redisson…

正缘画像 api数据接口

测测正缘画像&#xff0c;相貌特征&#xff0c;高矮胖瘦&#xff0c;黑白美丑&#xff0c;对方何许人也&#xff0c;远嫁近娶&#xff0c;何方定居&#xff0c;家庭观&#xff0c;持家爱家&#xff0c;生活质量&#xff0c;富裕贫穷&#xff0c;健康情况&#xff0c;测算结果仅…

极验4点选逆向 JS逆向分析 最新版验证码

目录 声明&#xff01; 一、请求流程分析 二、加密参数w与payload 三、参数w生成位置 四、结果展示&#xff1a; 原创文章&#xff0c;请勿转载&#xff01; 本文内容仅限于安全研究&#xff0c;不公开具体源码。维护网络安全&#xff0c;人人有责。 声明&#xff01; 本文章…

代码随想录算法训练营第四十五天|1049. 最后一块石头的重量 II、494. 目标和、474.一和零

代码随想录算法训练营第四十五天 1049. 最后一块石头的重量 II 题目链接&#xff1a;1049. 最后一块石头的重量 II 将所有石头分成2组&#xff0c;两组的重量尽可能相等&#xff0c;差值最小。 计算石头总重&#xff0c;再除以2就是目标重量&#xff0c;求要达到该重量能装的…

java —— Comparable 接口和 Comparator 比较器

一、Comparable 接口 当一个自定义的类&#xff0c;比如 Student 需要存储在 TreeSet 集合当中&#xff0c;可以为 Student 实现 Comparable 接口。因为 TreeSet 集合内部的元素是自然排序&#xff0c;而系统根本不知道自定义的类如何排序&#xff0c;所以需要我们人为地定义排…

升级笔记本

笔记本型号参数&#xff1a;Acer V5-573G CPU:I5 4200U 1.6GHz 最高2.6GHz 双核四线程 内存&#xff1a;4G 1600M DDR3L SO-DIMM 显卡&#xff1a;独立显卡NVIDIA GeForce GT 750M 硬盘&#xff1a;1T 5400转 屏幕&#xff1a;15.6英寸 1920*1080 【Acer V5-573G-54204G1…

WIFI 万[néng]钥匙 v5.0.10/v4.9.80 SVIP版!

WiFi Master Key v5.0.10/v4.9.80 WIFI万[Nng]钥匙APP是一款专业的网络连接工具&#xff0c;设计宗旨在于为用户提供方便快捷的WiFi接入方案。本应用集成了覆盖全国的大量免费WiFi热点信息&#xff0c;确保用户能够在不同地区快速而稳定地连接到互联网。此外&#xff0c;该应用…

atcoder350,351,352,353,354,355期部分题解

声明&#xff1a;有些题感觉已经说到很明白了&#xff0c;就先不写代码了&#xff0c;有空会补上 目录 350D: new friend 350E: toward 0 351D:Grid and Magnet 352D:permutation subsequence 353C: sigma problem 353D: another sigma problem 354C: atcoder magics …

Java面经(附源码分析)

String、StringBuffer和StringBuilder的区别&#xff1a; 首先String内部的字符数组是使用final修饰&#xff0c;无法修改&#xff0c;每次修改其实是创建一个新的String对象&#xff0c;为了高效字符串操作&#xff0c;引入了StringBuffer和StringBuilder。但StringBuffer的线…

神经网络与深度学习——第6章 循环神经网络

本文讨论的内容参考自《神经网络与深度学习》https://nndl.github.io/ 第6章 循环神经网络 给网络增加记忆能力 延时神经网络 有外部输入的非线性自回归模型 循环神经网络 简单循环网络 循环神经网络的计算能力 循环神经网络的通用近似定理 图灵完备 应用到机器学习 序列到类…

python实现描述统计

数据基础情况 import numpy as np import pandas as pd import matplotlib.pyplot as pyplot pd.options.display.max_rows 10##最多输出10行数据 data_url https://cf-courses-data.s3.us.cloud-object-storage.appdomain.cloud/IBMDeveloperSkillsNetwork-ST0151EN-SkillsN…

[C/C++] -- Libcurl开发

libcurl 是一个功能强大的 C 语言库&#xff0c;用于实现各种网络传输协议的客户端功能。它是 Curl 工具的核心&#xff0c;并提供了一个简单、灵活、高效的 API&#xff0c;允许开发人员在他们的应用程序中轻松地执行网络操作。 以下是 libcurl 的一些主要特点和功能&#xf…

数据整理操作及众所周知【数据分析】

各位大佬好 &#xff0c;这里是阿川的博客&#xff0c;祝您变得更强 个人主页&#xff1a;在线OJ的阿川 大佬的支持和鼓励&#xff0c;将是我成长路上最大的动力 阿川水平有限&#xff0c;如有错误&#xff0c;欢迎大佬指正 Python 初阶 Python–语言基础与由来介绍 Python–…

计算机组成原理·存储系统疑点归纳

组原这门课有点学得不是很懂&#xff0c;现在快考试了&#xff0c;挑几个做错了的题分析、记录一下。 N o . 1 \mathit{No}.1 No.1  x x x、 y y y 为定点整数&#xff0c;其格式为 1 1 1 位符号位、 n n n 位数值位&#xff0c;若采用补码一位乘法实现乘法运算&#xff0c;则…

[AI OpenAI] 推出ChatGPT Edu

一种负担得起的解决方案&#xff0c;帮助大学将AI负责任地引入校园。 我们宣布推出ChatGPT Edu&#xff0c;这是一个专为大学设计的ChatGPT版本&#xff0c;旨在负责任地向学生、教职员工、研究人员和校园运营部署AI。ChatGPT Edu由GPT-4o提供支持&#xff0c;能够跨文本和视觉…

【5】MySQL数据库备份-XtraBackup - 全量备份

MySQL数据库备份-XtraBackup-全量备份 前言环境版本 安装部署下载RPM 包二进制包 安装卸载 场景分析全量备份 | 恢复备份恢复综合 增量备份 | 恢复部分备份 | 恢复 前言 关于数据库备份的一些常见术语、工具等&#xff0c;可见《MySQL数据库-备份》章节&#xff0c;当前不再重…

SpringBoot 单元测试 指定 环境

如上图所示&#xff0c;在配置窗口中添加--spring.profiles.activedev&#xff0c;就可以了。

面试题:SpringBoot启动流程

具体步骤 新建一个Spring应用程序 (new springApplication())&#xff1a; 确认web应用的类型加载ApplicationContextInitializer加载ApplicationListener记录主启动类 运行应用程序&#xff08;.run&#xff09;&#xff1a; 准备环境对象Environment&#xff0c;用于加载…