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.rhkb.cn/news/337910.html

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

相关文章

深入探讨npm、Yarn、pnpm和npx之间的区别

前端生态系统是一个快速发展的领域&#xff0c;充满了各种工具和技术。对于开发人员来说&#xff0c;跟上这些创新可能是一项艰巨的挑战。 在本文中&#xff0c;我们将深入探讨npm、Yarn、pnpm和npx之间的区别&#xff0c;帮助你理解每个工具的不同之处。 包管理器比较 npm …

原码一位乘法(计算机组成原理)

算法原理 每次将1位乘数所对应的部分积与原部分积的“累积和”相加&#xff0c;并移位 设置寄存器 存放部分积累积和、乘积高位存放被乘数存放乘数、乘积低位 法则 乘积的数值位俩数绝对值之积&#xff1b;符号位 位 俩数符号位进行异或&#xff0c;即 p x ⊕ y 步骤 设…

你认识nginx吗,nginx是做什么的,nginx可以做什么 --1)nginx介绍

一.Nginx 介绍 Nginx&#xff08;发音同engine x&#xff09;是一个异步框架的 Web 服务器&#xff0c;也可以用作反向代理&#xff0c;负载平衡器 和 HTTP 缓存。该软件由 Igor Sysoev 创建&#xff0c;并于2004年首次公开发布。同名公司成立于2011年&#xff0c;以提供支持。…

【原型模式】详解

一.概念 原型模式是一种创建型设计模式&#xff0c;它的主要思想是通过复制现有对象来创建新对象&#xff0c;而不是通过实例化一个类来创建。在原型模式中&#xff0c;我们称被复制的对象为原型&#xff08;Prototype&#xff09;&#xff0c;新创建的对象为克隆体&#xff0…

Redis缓存(笔记一:缓存介绍和数据库启动)

目录 1、NoSQL数据库简介 2、Redis介绍 3、Redis(win系统、linux系统中操作) 3.1 win版本Redis启动 3.2 linux版本Redis启动 1、NoSQL数据库简介 技术的分类&#xff1a;&#xff08;发展史&#xff09; 1、解决功能性的问题&#xff1a;Java、Jsp、RDBMS、Tomcat、HTML、…

IC开发——VCS基本用法

1. 简介 VCS是编译型verilog仿真器&#xff0c;处理verilog的源码过程如下&#xff1a; VCS先将verilog/systemverilog文件转化为C文件&#xff0c;在linux下编译链接生成可执行文件&#xff0c;在linux下运行simv即可得到仿真结果。 VCS使用步骤&#xff0c;先编译verilog源…

【计算机毕业设计】388微信小程序足球赛事及队伍管理系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

开发一个comfyui的自定义节点-支持输入中文prompt

文章目录 目标功能开发环境实现过程翻译中文CLIP编码拓展仓库地址完整代码目标功能 目前comfyui的prompt提示词输入节点 CLIP Text Encode 只支持输入英文的prompt,而有时候我们需要自己制定一些prompt,所以就得将我们想要的提示词翻译为英文后再复制粘贴到该节点的输入框中…

Java的JDK环境变量配置(Windows)

只写了需要配置的环境变量 注&#xff1a;从JDK1.5开始&#xff0c;配置Java环境变量时&#xff0c;不再需要配置CLASSPATH&#xff0c;只需要配置JAVA_HOME和Path 1、配置JAVA_HOME 找到自己的JDK位置&#xff0c;我这里是 C:\dev\java\jdk-17.0.119在环境变量-系统变量中&…

ubuntu系统下安装mysql的步骤详解

一、下载安装包 下载地址&#xff1a; https://dev.mysql.com/downloads/repo/apt 跳转到这个页面&#xff1a; 直接点击Download。 直接点击最下面的开始下载安装包即可。 二、将安装包下载到ubuntu系统中 先将用户切换成root用户&#xff0c;把下载好的安装包复制到桌面上&…

互联网简史-分久必合,合久必分

六一儿童节&#xff0c;给孩子们讲讲互联网的历史。 任何当代技术都是古老技术的重组&#xff0c;这是真的。我从电话网络开始&#xff0c;两幅图完事。电波可以承载语音作为最开始&#xff0c;后面的事自然而然&#xff1a; 说实话&#xff0c;网络这种事&#xff0c;它的 …

各大平台取消一年期免费SSL证书后,如何申请超长期免费SSL证书

一&#xff1a;为什么一定要用SSL证书 SSL证书是一种提供网络安全的协议&#xff0c;主要作用是提供对用户和服务器的认证以及确保传送的数据进行加密和隐藏&#xff0c;从而保证数据的完整性和安全性。网站安装SSL证书后就可以实现HTTPS访问&#xff0c;消除网站访问不安全提…

从0开始制作微信小程序

目录 前言 正文 需要事先准备的 需要事先掌握的 什么是uniapp 平台应用的分类方式 什么是TypeScript 创建项目 项目文件作用 源码地址 尾声 &#x1f52d; Hi,I’m Pleasure1234&#x1f331; I’m currently learning Vue.js,SpringBoot,Computer Security and so on.&#x1…

一、大模型推理

https://github.com/hiyouga/LLaMA-Factory/blob/main/README_zh.md https://github.com/hiyouga/LLaMA-Factory/blob/main/examples/README_zh.md 安装 v7.1 https://github.com/hiyouga/LLaMA-Factory/releases/tag/v0.7.1 git clone --depth 1 https://github.com/hiyoug…

TS38.300中的切换流程(很一般)

本文根据3GPP R18 TS 38.300第9.2.3节整理 切换(Handover)是移动终端(UE)进入RRC_CONNECTED状态后在不同服务小区(Cell)之间保持与网络联系唯一手段&#xff0c;期间首先通过控制面(C-Plane)进行无线测量、切换协商及触发等&#xff1b;为此3GPP在TS38.300中定义如下。 RAN系统…

【六一儿童节】的科技奇幻旅程:解锁【机器学习】与【人工智能】的无限创意

目录 一、机器学习与人工智能简介 二、六一儿童节的特殊意义 三、项目概述&#xff1a;智能绘画助手 四、技术栈和工具 五、数据准备 六、模型训练 1. 数据预处理 2. 构建和训练模型 七、智能绘画助手的实现 1. 搭建Flask应用 2. 客户端界面 八、扩展功能与优化 1…

【算法】贪心算法——柠檬水找零

题解&#xff1a;柠檬水找零(贪心算法) 目录 1.题目2.题解3.参考代码4.证明5.总结 1.题目 题目链接&#xff1a;LINK 2.题解 分情况讨论 贪心算法 当顾客为5元时&#xff0c;收下当顾客为10元时&#xff0c;收下10元并找回5元当顾客为20元时&#xff0c;收下20元并找回10…

Fastjson 反序列化漏洞[1.2.24-rce]

漏洞复现环境搭建请参考 http://t.csdnimg.cn/vSaaw kali切换jdk版本请参考 Kali安装JAVA8和切换JDK版本的详细过程_kali安装jdk8-CSDN博客 漏洞原理 Fastjson提供的com.sun.rowset.JdbcRowSetImpl类下的dataSourceName方法支持传入一个RMI/LDAP源&#xff0c;支持远程调用。…

基础—SQL—DQL(数据查询语言)聚合函数

一、引言 一般情况下&#xff0c;我们在进行分组查询的时候&#xff0c;一般配合着聚合函数来进行操作&#xff0c;所以先了解和学习聚合函数再学习和操作分组查询。 二、DQL—聚合函数 1、介绍 聚合函数指的是讲一列数据作为一个整体&#xff0c;进行纵向的计算。 2、常见…

GiantPandaCV | FasterTransformer Decoding 源码分析(六)-CrossAttention介绍

本文来源公众号“GiantPandaCV”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满。 原文链接&#xff1a;FasterTransformer Decoding 源码分析(六)-CrossAttention介绍 GiantPandaCV | FasterTransformer Decoding 源码分析(一)-整体框架介绍-CSDN博客 …