03-02-Vue组件之间的传值

前言

我们接着上一篇文章 03-01-Vue组件的定义和注册 来讲。


下一篇文章 04-Vue:ref获取页面节点–很简单

父组件向子组件传值

我们可以这样理解:Vue实例就是一个父组件,而我们自定义的组件(包括全局组件、私有组件)就是子组件

【重点】需要注意的是,子组件不能直接使用父组件中的数据。父组件可以通过props属性向子组件传值

父组件向子组件传值的代码举例

父组件:

<template><div id="app"><MyComponent :msg="message"></MyComponent></div>
</template><script>
import MyComponent from './components/MyComponent.vue';
export default {components:{MyComponent},data(){return{message: '这是父组件中的变量'}}
};
</script>

子组件:

<template><div>这是组件中的内容, msg: {{ msg }}</div>
</template><script>
export default {props: ['msg']
};
</script><style>
</style>

效果如下:

3

父组件给子组件传值的步骤

根据上方截图,我们可以总结出父组件给子组件传值的步骤如下。

(1)在子组件的props属性中声明父亲传递过来的数据

(2)使用子组件的模板时,绑定props中对应的属性

(3)父组件在引用子组件时,进行属性绑定。

子组件中,data中的数据和props中的数据的区别

  • 子组件中的 data 数据,并不是通过 父组件传递过来的,而是子组件自身私有的,比如: 子组件通过 Ajax ,请求回来的数据,都可以放到 data 身上。props 中的数据,都是通过 父组件 传递给子组件的。

  • data中的数据是可读可写的;props中的属性只是可读的,无法重新赋值,重新赋值会报错(也就是说,子组件不要直接去修改父组件中的数据)。

父组件将方法传递给子组件

父组件通过事件绑定机制,将父组件的方法传递给子组件

父组件代码:

<template><div id="app"><!-- 父组件向子组件 传递 方法,是通过 事件绑定机制; v-on。当我们自定义了 一个 事件属性 parent-show(这个地方不能用驼峰命名)之后,--><!-- 那么,子组件就能够,通过 emit 来调用 传递进去的 这个 方法了 --><!-- 【第一步】。意思是说,`show`是父组件的方法名,`parent-show`是自定义的时间属性,稍后要在子组件中用到 --><MyComponent :msg="message" @parentShow="show"></MyComponent></div>
</template><script>
import MyComponent from "./components/MyComponent.vue";
export default {components: {MyComponent,},data() {return {message: "这是父组件中的变量",};},methods: {// 定义父组件的show方法show() {console.log("这是父组件的方法");},},
};
</script>

子组件代码:

<template><!-- 【第二步】按照正常的写法来:点击按钮,调用子组件的方法 --><div @click="handleClick">这是组件中的内容, msg: {{ msg }}</div>
</template><script>
export default {props: ["msg"],methods: {handleClick() {// 当点击子组件的按钮时,如何 拿到 父组件传递过来的 func 方法,并调用这个方法???//  emit 英文原意: 是触发,调用、发射。意思是,触发父组件的方法// 【第三步】 在子组件的方法中,通过 emit 触发父组件的方法this.$emit("parentShow");},},
};
</script><style>
</style>

效果如下:(点击子组件,触发了父组件的方法)

4

根据上面的代码,我们可以总结出,父组件将方法传递给子组件,分为三步,具体可以看上方代码的注释。

子组件向父组件传值

上面的一段中,我们再看一遍父组件将方法传递给子组件的这段代码(一定要再看一遍,因为我们是要在此基础之上做修改)。

如果要实现子组件向父组件传值,代码是类似的,我们只需要在子组件通过emit触发父组件的方法时,把子组件的参数带出去就可以了。代码如下。

父组件代码:

<template><div id="app"><MyComponent :msg="message" @parentShow="show"></MyComponent></div>
</template><script>
import MyComponent from "./components/MyComponent.vue";
export default {components: {MyComponent,},data() {return {message: "这是父组件中的变量",};},methods: {// 定义父组件的show方法show(data1, data2) { //【第二步】父组件里放两个参数,这个两个参数就代表着子组件中的`childData1`、`childData2`console.log("这是父组件的方法");console.log('子组件传值:',data1, data2);},},
};
</script>

子组件代码:

<template><div @click="handleClick">这是组件中的内容, msg: {{ msg }}</div>
</template><script>
export default {props: ["msg"],methods: {handleClick() {// 子组件如果要给父组件传递参数,在触发 emit 的时候,通过参数的形式带出去就可以了// 【第一步】在子组件里,我们带两个参数出去,传给父组件this.$emit("parentShow", 'childData1', 'childData2');},},
};
</script><style>
</style>

运行结果:(点击之后)

5

代码举例2:(将子组件中的data数据传递给父组件,存放到父组件的data中)

在上方代码的基础之上,做改进。

父组件代码

<template><div id="app"><MyComponent :msg="message" @parentShow="show"></MyComponent></div>
</template><script>
import MyComponent from "./components/MyComponent.vue";
export default {components: {MyComponent,},data() {return {message: "这是父组件中的变量",parentData: null,};},methods: {// 定义父组件的show方法show(arg) {//【第二步】父组件里放参数,这个参数就代表着子组件中的 child.dataconsole.log("父组件提供的方法");this.parentData = arg; //将参数arg传递给父组件的data,也就达到了目的:子组件传递数据,赋值给父组件console.log("打印父组件的数据(这是子组件传过来的):" +JSON.stringify(this.parentData));},},
};
</script>

子组件代码

<template><div @click="handleClick">这是组件中的内容, msg: {{ msg }}</div>
</template><script>
export default {props: ["msg"],data(){return{childData: { //定义自组件的数据name: 'HydeLinjr',age: 26}}},methods: {handleClick() {// 子组件如果要给父组件传递参数,在触发 emit 的时候,通过参数的形式带出去就可以了// 【第一步】在子组件里,我们带两个参数出去,传给父组件this.$emit("parentShow", this.childData);},},
};
</script><style>
</style>

运行结果:(点击之后)

6

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

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

相关文章

足球走地全自动化操作软件实现过程

本次采用selenium实现自动化操作的流程 打开浏览器录入账号密码等待数据请求&#xff08;监听&#xff09;有新数据&#xff0c;进行自动化操作通过homeName搜索&#xff0c;找到对应数据找到对应的类型&#xff08;让、大小…&#xff09;找到对应的盘口输入数量提交 附登录…

Python语法(全)

前言&#xff1a; 下面是Python基本的语法&#xff0c;大家耐心观看&#xff01; 1.基础语法 1.1字面量 字面量&#xff1a;在代码中&#xff0c;被写下来的的固定的值&#xff0c;称之为字面 1.2字符串 字符串&#xff08;string&#xff09;&#xff0c;又称文本&#xff…

Java将json字符串转为对象,保证字段顺序

一、引入依赖 <dependency><groupId>com.squareup.retrofit2</groupId><artifactId>converter-jackson</artifactId><version>2.9.0</version> </dependency>二、核心代码 public static String obj2JsonString(Object obj)…

nss做题

[NCTF 2018]签到题 1.f12在index.php中找到flag [NSSCTF 2022 Spring Recruit]ezgame 1.在js源码中就有flag [UUCTF 2022 新生赛]websign 1.打开环境后发现ctrlu和右键&#xff0c;f12都被禁用了。两种方法&#xff0c;第一种&#xff1a;禁用js&#xff1b;第二中提前打开…

【一站式学会Kotlin】第七节:kotlin匿名函数的it关键字

作者介绍: 百度资深Android工程师T6,在百度任职7年半。 目前:成立赵小灰代码工作室,欢迎大家找我交流Android、微信小程序、鸿蒙项目。= 一:通俗易懂的人工智能教程:https://www.captainbed.cn/nefu/ 点一下,打开新世界的大门。 二:【一站式学会Kotlin】免费领取:文章…

验证软件需求

1 从哪些方面验证软件需求的正确性 需求分析阶段的工作结果是开发软件系统的重要基础,大量统计数字表明,软件系统中15%的错误起源于错误的需求。为了提高软件质量,确保软件开发成功,降低软件开发成本&#xff0c;一旦对目标系统提出一组要求之后,必须严格验证这些需求的…

常用激活函数学习

常用激活函数及其应用 ReLU (Rectified Linear Unit) 公式: f ( x ) max ⁡ ( 0 , x ) f(x) \max(0, x) f(x)max(0,x)理解: 当输入值为正时&#xff0c;输出等于输入值&#xff1b;否则输出为0。ReLU函数简单且计算效率高&#xff0c;能有效缓解梯度消失问题&#xff0c;促进…

vue 表单些某项 v-if 控制后,想在显示时添加验证

效果: 可以为<el-form-item>添加 key 然后prop正常写就行 (key需要唯一值) <el-form-item label"设置" v-if"advanced_setting" key"threshold" prop"threshold"><el-inputv-model"form_Warning.threshold"p…

【退役之重学Java】关于 Gateway

一、 Gateway 是什么 Gateway 是 Spring cloud 的一个全新项目&#xff0c;基于 Spring 5 、Spring Boot 2 和 Project Reactor等技术开发的网关 旨在 是为微服务架构提供一种简单有效的统一的 API 路由管理方式 目标 是替代 Zuul 优势 性能更佳&#xff0c;Gateway 是基于 异步…

汇编小程序

汇编语言基础程序(持续更修…) 数组求和 ExitProcess PROTO.dataarr WORD 1,2,3,4,5,6,7,8,9,10 .code main PROCmov rbx, 0mov rcx, LENGTHOF arr ;获取arr元素个数mov rsi, OFFSET arr ;获取arr的首地址 Addsum:add bl, [rsi] ;获取rsi寄存器中保存地址对应的值x,…

如何使用MATLAB写测试(1)初识unittests

如何使用MATLAB写测试&#xff08;1&#xff09;初识unittests WHAT&#xff1a; 本文介绍如何在MATLAB中写简单的单元测试。 WHY&#xff1a; 在学生时代&#xff0c;我作为一名工科生喜欢用MATLAB的首要原因是可以进行快速的开发。无论是对算法的验证&#xff0c;调试&am…

【git pull 和 push详解】

git pull 和 push详解 1.背景2.命令和解释2.1 git pull简介详情 2.2 git push简介Git Push 参数及详细解释 1.背景 在分布式开发环境中&#xff0c;git pull和git push的使用确保了团队成员之间的代码一致性&#xff0c;减少了不同步导致的问题。它们简化了版本管理&#xff0c…

关于burp的intruder返回包空白问题

记录一下被自己蠢笑的问题 burp返回包为空怎么办&#xff0c;在查询无果后经过多次试验&#xff0c;确实没有效果 看那三个点还以为加载呢&#xff0c;攻击完了怎么一个显示没有 于是…… 鼠标到三个点&#xff0c;往下一拉 哈哈哈哈哈哈哈&#xff0c;真是被自己给蠢到了

[5] CUDA线程调用与存储器架构

CUDA线程调用与存储器架构 前几节简单讲了如何编写CUDA程序&#xff0c;利用GPU的处理能力并行执行多个线程和块。之前所有程序里的线程是相互独立的&#xff0c;没有多个线程之间的通信多是实际应用程序需要中间线程之间的通信&#xff0c;本文将仔细讲解线程调用以及CUDA的分…

@JsonFormat注解出现日期序列化以及反序列化问题(日期比实际日期少一天)

文章目录 前言一、场景如下所示二、问题分析三、JsonFormat注解是什么以下是 JsonFormat 注解的一些常用属性&#xff1a; 四、解决问题解决方式&#xff1a;只需要指定对应的时区就好效果如下&#xff1a; 五、JsonFormat 注解时出现日期问题总结 前言 在一次的偶然机会下发现…

Python基于PyQt6制作GUI界面——按钮

示例对应的制作的 ui文件 界面如下所示。 <?xml version"1.0" encoding"UTF-8"?> <ui version"4.0"><class>Form</class><widget class"QWidget" name"Form"><property name"geom…

ColossalAI Open-Sora 1.1 项目技术报告 (视频生成)

项目信息 项目地址&#xff1a;https://github.com/hpcaitech/Open-Sora技术报告&#xff1a; Open-Sora 1&#xff1a;https://github.com/hpcaitech/Open-Sora/blob/main/docs/report_01.mdOpen-Sora 1.1&#xff1a;https://github.com/hpcaitech/Open-Sora/blob/main/docs…

swift中json和字典Dict或者数组相互转换,JSONSerialization的强大使用

在Swift中&#xff0c;你可以使用JSONSerialization类将JSON字符串转换为字典。要将 Swift 字典转换为 JSON 字符串&#xff0c;我们可以使用JSONSerialization类的data(withJSONObject:options:)方法。这个方法将字典转换为二进制数据&#xff0c;然后我们可以使用String(data…

Day23:Leetcode:530.二叉搜索树的最小绝对差 + 501.二叉搜索树中的众数 + 236. 二叉树的最近公共祖先

LeetCode&#xff1a;530.二叉搜索树的最小绝对差 问题描述 解决方案&#xff1a; 1.思路 中序遍历 2.代码实现 class Solution {int pre;int ans;public int getMinimumDifference(TreeNode root) {ans Integer.MAX_VALUE;pre -1;dfs(root);return ans;}public void d…

TCP协议三次握手、四次挥手

目录 TCP协议三次握手的方式建立连接TCP协议四次挥手的方式关闭连接 TCP协议三次握手的方式建立连接 第一次握手&#xff08;SYN&#xff09;&#xff1a;客户端向服务器发送SYN报文&#xff0c;请求建立连接。该报文包含客户端选择的初始序列号&#xff08;ISN&#xff09;&a…