vue3组件传参

news/2024/6/24 7:38:01/文章来源:https://blog.csdn.net/Agont_/article/details/137140894

vue3中的组件通信

一、props(父传子)

props主要用于父组件向子组件通信。在父组件中通过用 :msg=“msg” 绑定需要传给子组件的属性值,然后再在子组件中用 props 接收该属性值。

方法一:

// 父组件 传值
<child :msg1="msg1" :msg2="msg2"></child>
<script>
import child from "./child.vue";
import { ref, reactive } from "vue";
export default {setup() {// 基础类型传值const msg1 = ref("父组件传给子组件的msg1");// 复杂类型(数组或对象)传值const msg2 = reactive(["父组件传给子组件的msg2"]);return {msg1,msg2}}
}
</script>
// 子组件 接收
<script>
export default {// props接受父组件传过来的值props: ["msg1", "msg2"],setup(props) {console.log(props);// { msg1:"父组件传给子组件的msg1", msg2:"父组件传给子组件的msg2" }},
}
</script>

方法二:使用 setup 语法糖

// 父组件 传值
<child :msg="msg">
</child>
<script setup>import child from "./child.vue";import { ref, reactive } from "vue";const msg = ref("父组件传给子组件的值");// const msg = reactive(["父组件传给子组件的值"]);// const msg = reactive({"父组件传给子组件的值"});
</script>// 子组件 接收
<script setup>// 这里不需要在从vue中引入defineProps,直接用const props = defineProps({// 第一种写法msg: String;// 第二种写法msg:{type:String,default:""}})console.log(props);
</script>

注意

props中数据流是单项的,即子组件不可改变父组件传来的值

在组合式API中,如果想在子组件中用其它变量接收props的值时需要使用toRef将props中的属性转为响应式。

二、emit(子传父)

emit 也就是通过自定义事件传值,主要用于子组件向父组件通信。

在子组件的点击事件中,通过触发父组件中的自定义事件,把想传给父组件的信息以参数的形式带过去,父组件便可以拿到子组件传过来的参数值。

子组件传参

<button @click="handleClick">点击</button>
<script>
export default {name: "son",setup(props,context) {const handleClick = () => {context.emit('myClick', '我是子组件的值')}return { handleClick }}
}
</script>

使用setup时,它接受两个参数:

  • props: 组件传入的属性
  • context

setup 中接受的props是响应式的, 当传入新的 props 时,会及时被更新。

在vue3中得setup()中得第二个参数content对象中就有emit,那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。

父组件接收

<div class="father"><h1>这是父组件</h1><Son @myClick="handleClick"></Son>
</div>
<script>
import Son from './son.vue'
export default {name: "father",components: {Son},setup() {const handleClick = (val) => {console.log(val)}return{handleClick}}
}
</script>

三、expose / ref

expose与ref 主要用于父组件获取子组件的属性或方法。在子组件中,向外暴露出属性或方法,父组件便可以使用 ref 获取到子组件身上暴露的属性或方法。

第一种方法:expose

子组件

setup(props, context) {context.expose({childName: "子组件的名称属性",childMethod() {console.log("子组件的方法");}})}

父组件接收属性和方法

<Son ref="childRef"></Son>
<button @click="handlerClick">按钮</button>
<script>
import Son from './son.vue';
import { ref } from "vue";
export default {name: "father",components: {Son},setup() {const childRef = ref(null);const handlerClick = () => {// 获取子组件对外暴露的属性const childName = childRef.value.childName;console.log(childName);// 调用子组件对外暴露的方法childRef.value.childMethod();console.log(childRef);}return { childRef, handlerClick }}
}
</script>

第二种方法:defineExpose

子组件

<script setup>
defineExpose({childName: "子组件的名称属性",childMethod() {console.log("子组件的方法");}
})
</script>

四、provide / inject

provide与inject 主要为父组件向子组件或多级嵌套的子组件通信。

provide:在父组件中可以通过 provide 提供需要向后代组件传送的信息。

inject:从父组件到该组件无论嵌套多少层都可以直接用 inject 拿到父组件传送的信息。

父组件或者可以说成祖组件

<h2>我是祖组件--{{name}}---{{price}}</h2>
<Child />
import Child from "@/components/inject/child.vue"
import { reactive,toRefs,provide } from "vue";
components:{Child},setup() {let car  = reactive({name:'特斯拉',price:'10w'});provide('car',car)return{...toRefs(car)}}

子组件或者是后代组件

<script>
import { inject } from 'vue';
export default {setup() {let cars =  inject('car')console.log(cars,'****');return{cars}}
}
</script>

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

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

相关文章

大数据学习-2024/3/30-MySQL5.6版本的安装

1、下载好文件后打开bin目录&#xff1a; 2、在这个位置进入输入cmd进入命令行界面&#xff0c;进入命令行界面后输入如下&#xff1a;mysqld install 进行数据库安装&#xff1a; 注意&#xff1a;显示Service successfully installed表示安装成功 3、安装好后启动服务&…

iPhone设备中使用第三方工具查看应用程序崩溃日志的教程

​ 目录 如何在iPhone设备中查看崩溃日志 摘要 引言 导致iPhone设备崩溃的主要原因是什么&#xff1f; 使用克魔助手查看iPhone设备中的崩溃日志 奔溃日志分析 总结 摘要 本文介绍了如何在iPhone设备中查看崩溃日志&#xff0c;以便调查崩溃的原因。我们将展示三种不同的…

ObjectiveC-03-XCode的使用和基础数据类型

本节做为Objective-C的入门课程&#xff0c;笔者会从零基础开始介绍这种程序设计语言的各个方面。 术语 ObjeC&#xff1a;Objective-C的简称&#xff0c;因为完整的名称过长&#xff0c;后续会经缩写来代替&#xff1b;项目/工程&#xff1a;也称工程&#xff0c;指的是一个A…

邮件SMTP服务的工作原理?如何配置服务器?

邮件SMTP服务如何优化性能&#xff1f;怎么使用邮件服务器发信&#xff1f; 电子邮件能够准确无误地发送到收件人的邮箱中&#xff0c;离不开背后的SMTP服务。那么&#xff0c;邮件SMTP服务究竟是如何工作的呢&#xff1f;接下来&#xff0c;AokSend就来深入剖析一下邮件SMTP服…

力扣17 电话号码的字母组合 Java版本

文章目录 题目描述代码 题目描述 给定一个仅包含数字 2-9 的字符串&#xff0c;返回所有它能表示的字母组合。答案可以按 任意顺序 返回。 给出数字到字母的映射如下&#xff08;与电话按键相同&#xff09;。注意 1 不对应任何字母。 示例 1&#xff1a; 输入&#xff1a…

RVM安装ruby笔记

环境 硬件&#xff1a;Macbook Pro 系统&#xff1a;macOS 14.1 安装公钥 通过gpg安装公钥失败&#xff0c;报错如下&#xff1a; 换了几个公钥地址&#xff08;hkp://subkeys.pgp.net&#xff0c;hkp://keys.gnupg.net&#xff0c;hkp://pgp.mit.edu&#xff09;&#xff0c;…

V R虚拟现实元宇宙的前景|虚拟现实体验店加 盟合作|V R设备在线购买

VR&#xff08;虚拟现实&#xff09;技术作为一种新兴的技术&#xff0c;正在逐渐改变人们的生活和工作方式。随着技术的不断进步&#xff0c;人们对于元宇宙的概念也越来越感兴趣。元宇宙是一个虚拟世界&#xff0c;通过VR技术可以实现人们在其中进行各种活动和交互。 元宇宙的…

【论文笔记】Text2QR

论文&#xff1a;Text2QR: Harmonizing Aesthetic Customization and Scanning Robustness for Text-Guided QR Code Generation Abstract 二维码通常包含很多信息但看起来并不美观。stable diffusion的出现让平衡扫描鲁棒性和美观变为可能。 为了保证美观二维码的稳定生成&a…

鸿蒙原生应用开发-网络管理HTTP数据请求

一、场景介绍 应用通过HTTP发起一个数据请求&#xff0c;支持常见的GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT方法。 二、接口说明 HTTP数据请求功能主要由http模块提供。 使用该功能需要申请ohos.permission.INTERNET权限。 涉及的接口如下表&#xff0c;具体的…

bugku-web-秋名山车神

发现问题 每一次刷新后&#xff0c;得到的算式都不一样 但是按照他的说法在两秒内多次进行页面刷新&#xff0c;这时的算式是相同的 现在就要找到&#xff0c;是以何种方式将答案反馈给他 Give me value post about 965096517*4378809482019677711-1518023767539874227-528320…

【中文视觉语言模型+本地部署 】23.08 阿里Qwen-VL:能对图片理解、定位物体、读取文字的视觉语言模型 (推理最低12G显存+)

项目主页&#xff1a;https://github.com/QwenLM/Qwen-VL 通义前问网页在线使用——&#xff08;文本问答&#xff0c;图片理解&#xff0c;文档解析&#xff09;&#xff1a;https://tongyi.aliyun.com/qianwen/ 论文v3. : 一个全能的视觉语言模型 23.10 Qwen-VL: A Versatile…

Linux:入门篇

文章目录 前言1. Linuxd的安装环境2.Linux的简单介绍2.1 新建目录2.2 新建文件 3.指令到底是什么&#xff1f;4.shell命令以及运行原理5.总结 前言 很多人对于Linux的学习总是感觉无法下手&#xff0c;不知道从何开始学习&#xff0c;相信这篇文章将会为你提供一个清晰的思路。…

Python程序设计 多重循环(二)

1.打印数字图形 输入n&#xff08;n<9)&#xff0c;输出由数字组成的直角三角图形。例如&#xff0c;输入5&#xff0c;输出图形如下 nint(input("")) #开始 for i in range(1,n1):for j in range(1,i1):print(j,end"")print()#结束 2.打印字符图形 …

vlanif三层交换机实现不同网络通信

实验目的&#xff1a;通过三层交换机实现不同 网络通信&#xff0c;之前都是路由器进行不同网络转发 拓扑图 内容&#xff1a;左边vlan10&#xff0c;右边vlan20 lsw1接口通过所有vlan lsw2网路vlan10 lsw3网络vlan20 问题点&#xff1a;开始只是配置了最上面LSW1的交换机…

Leetcode 118. 杨辉三角

心路历程&#xff1a; 其实最直观的想法是可以直接按照从上到下的顺序遍历数组&#xff0c;依次计算数组的值即可&#xff0c;相当于DP表格的初始化。 但是也可以从递归的角度进行思考&#xff0c;cache yyds。 注意的点&#xff1a; 1、注意第二层循环col应该是[0, line1) …

C语言中入门到实战————动态内存管理

目录 前言 一、为什么要有动态内存分配 二、 malloc和free 2.1 malloc 2.2 free 三、calloc和realloc 3.1 calloc 3.2 realloc 四. 常见的动态内存的错误 4.1 对NULL指针的解引用操作 4.2 对动态开辟空间的越界访问 4.3 对非动态开辟内存使用free释放 4.4 使…

网络协议学习——HTTPS

目录 ​编辑 一&#xff0c;认识HTTPS 二&#xff0c;加密方式 1&#xff0c;对称式加密 2&#xff0c;非对称式的加密 3&#xff0c;数据指纹&#xff08;数据摘要&#xff09; 4&#xff0c;数据签名 三&#xff0c;HTTPS的工作原理 实现方式 数字证书 一&#xff0c…

5-规范设计(下):commit信息风格迥异、难以阅读,如何规范?

我们在做代码开发时&#xff0c;经常需要提交代码&#xff0c;提交代码时需要填写 Commit Message&#xff08;提交说明&#xff09;&#xff0c;否则就不允许提交。 所以在 Go 项目开发时&#xff0c;一个好的 Commit Message 至关重要&#xff1a; 可以使自己或者其他开发人…

基于单片机三路信号故障诊断仿真设计

单片机设计介绍&#xff0c;基于单片机三路信号故障诊断仿真设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机三路信号故障诊断仿真设计概要主要涵盖了系统设计的整体框架、关键模块功能、仿真方法以及预期实现的目…

嵌入式硬件中常见的面试问题与实现

1 01 请列举您知道的电阻、电容、电感品牌(最好包括国内、国外品牌) ▶电阻 美国:AVX、VISHAY威世 日本:KOA兴亚、Kyocera京瓷、muRata村田、Panasonic松下、ROHM罗姆、susumu、TDK 台湾:LIZ丽智、PHYCOM飞元、RALEC旺诠、ROYALOHM厚生、SUPEROHM美隆、TA-I大毅、TMT…