Vue前端开发子组件向父组件传参

embedded/2024/11/22 5:58:37/

在父组件中,如果需要获取子组件中的数据,有两种方式,一种是在子组件中自定义事件,父组件绑定该事件,当触发自定义事件时,向父组件传入参数;另一种是先通过ref属性给子组件命名,然后在父组件中就可以调用$refs对象,访问命名的子组件中数据。

子组件自定义事件传参

父组件通过绑定子组件中自定义的事件,在触发的事件中,获取传入的数据,这种方式是子组件向父组件传参的重要方式,接下来通过一个实例来演示它实现的过程。

实例7-2 子向父组件传参

1. 功能描述

在实例7-1的基础之上,向子组件的视图中添加一个“长度”按钮,当点击该按钮时,获取父组件传入数据的长度,并通过自定义的事件,将该长度值传递给父组件,父组件接收该值后,显示在页面中。

2. 实现代码

在项目的components 文件夹中,添加一个名为“Parent”的.vue文件,该文件的保存路径是“components/ch7/part2/”,在文件中加入如清单7-3所示代码。

代码清单7-3 Parent.vue代码

<template><div class="iframe"><div class="i-left"><span>父组件:</span><input v-model="name" placeholder="请输入用户名" /></div><div class="i-right">{{ len }}</div></div><!-- 在父组件中调用子组件 --><Child :inputName="name" @getLength="onGetLength" />
</template>
<script>
import Child from "./Child.vue"
export default {data() {return {name: "",len: 0}},components: {Child},methods: {onGetLength(data) {this.len = data}}
}
</script>
<style>
.iframe {width: 300px;display: flex;justify-content: space-between;align-items: center;padding: 8px;border: solid 1px #ccc;
}.i-left {display: flex;align-items: center;
}.iframe input {padding: 8px;
}.iframe:last-child {border-top: none;padding: 16px 8px;background-color: #eee;
}
</style>

在父组件中,导入并注册了一个名称为Child的子组件,它的功能是通过自定义的事件向父组件传递数据,并将该数据显示在视图模块中,它的代码如清单7-4所示。

代码清单7-4 Child.vue代码

<template><div class="iframe"><div class="i-left"><span>子组件:</span><span>{{ inputName }}</span></div><div class="i-right"><button @click="onGetLength">长度</button></div></div>
</template>
<script>
export default {props: {inputName: {type: String,required: true}},emits: ["getLength"],methods: {onGetLength() {this.$emit("getLength", this.inputName.length)}}
}
</script>

3. 页面效果

保存代码后,页面在Chrome浏览器下执行的页面效果如图7-3所示。
在这里插入图片描述

4. 源码分析

在子组件Child的源码中,为了能向父组件传递参数,先在“emits”选项中定义一个名为“getLength”的事件,当点击“长度”按钮时,执行该事件,同时,将inputName数据的长度值作为事件携带的参数。

在父组件Parent的源码中,为了能接收到子组件传入的参数,则在调用子组件时,绑定自定义的“getLength”事件,并在事件执行时,获取携带的参数值,并将该值作为变量,绑定到视图的元素中,从而最终实现子组件向父组件传参的过程。

需要说明的是:自定义事件携带的参数可以是一个变量,也可以是一个对象,如果需要传递多项数据,则可以借助对象的形式向父组件传递。
在这里插入图片描述


http://www.ppmy.cn/embedded/139541.html

相关文章

【贪心算法】贪心算法三

贪心算法三 1.买卖股票的最佳时机2.买卖股票的最佳时机 II3.K 次取反后最大化的数组和4.按身高排序5.优势洗牌&#xff08;田忌赛马&#xff09; 点赞&#x1f44d;&#x1f44d;收藏&#x1f31f;&#x1f31f;关注&#x1f496;&#x1f496; 你的支持是对我最大的鼓励&#…

Spark SQL大数据分析快速上手-完全分布模式安装

【图书介绍】《Spark SQL大数据分析快速上手》-CSDN博客 《Spark SQL大数据分析快速上手》【摘要 书评 试读】- 京东图书 大数据与数据分析_夏天又到了的博客-CSDN博客 Hadoop完全分布式环境搭建步骤-CSDN博客,前置环境安装参看此博文 完全分布模式也叫集群模式。将Spark目…

【论文笔记】Large Brain Model (LaBraM, ICLR 2024)

Code: https://github.com/935963004/LaBraM Data: 无 目录 AbstractIntroductionMethodNeural tokenizer training&#xff1a;Pre-training LaBraM&#xff1a; ResultsExperimental setup&#xff1a;Pre-training result&#xff1a;Comparison with SOTA&#xff1a;Pre-t…

scPair:隐式特征选择提高single-cell paired多模态分析

配对多模态单细胞分析可在同一细胞中分析多模态特征&#xff0c;用于识别染色质和 mRNA 模态互补的细胞状态以及将调控元件与靶基因联系起来。然而&#xff0c;与单模态分析相比&#xff0c;输入特征的高维度和较浅的测序深度给数据分析带来了挑战。在这里&#xff0c;作者介绍…

leetcode:114. 二叉树展开为链表

给你二叉树的根结点 root &#xff0c;请你将它展开为一个单链表&#xff1a; 展开后的单链表应该同样使用 TreeNode &#xff0c;其中 right 子指针指向链表中下一个结点&#xff0c;而左子指针始终为 null 。展开后的单链表应该与二叉树 先序遍历 顺序相同。 示例 1&#xf…

如何在 Ubuntu 上设置 SSH X11 转发并访问远程图形界面

1. 前言 当我们在远程服务器上运行需要图形界面的程序时&#xff0c;通常需要使用 SSH 来连接服务器并通过 X11 转发将远程的图形界面显示到本地机器。本文将详细介绍如何使用 SSH 命令和相关的配置&#xff0c;来通过 X11 转发在 Ubuntu 上远程访问服务器的图形界面。 2. SS…

Bokeh实现大规模数据可视化的最佳实践

目录 引言 一、Bokeh简介 二、安装Bokeh 三、数据准备 四、性能优化 五、创建图表 六、添加交互功能 七、应用案例 八、高级技巧 九、总结 引言 在数据科学领域&#xff0c;数据可视化是一个至关重要的环节。通过可视化&#xff0c;我们可以直观地理解数据的特征和趋…

springboot中设计基于Redisson的分布式锁注解

如何使用AOP设计一个分布式锁注解&#xff1f; 1、在pom.xml中配置依赖 <dependency><groupId>org.springframework</groupId><artifactId>spring-aspects</artifactId><version>5.3.26</version></dependency><dependenc…