浅谈vue父子组件怎么传值
作者：yali 发布时间：2024-05-09 15:16:15
标签：vue,父子组件,传值
背景：最近在做vue的项目，因为页面的逻辑比较复杂，代码量较多，所以就想抽离出一些组件放到component里面。问题就随之来了。
因为vue不提倡在子组件中修改父组件的值，所以如果要这样操作的话就要麻烦一步，而我正好需要这样的操作，于是就查阅了资料
上父组件的代码，引用了exp-group子组件
<exp-group :grpVisible="grpVisible" :grpData="grpData" @updateData="acceptData"></exp-group>
grpVisible 和 grpData 是传给子组件的属性，一个是普通类型，一个是对象
grpVisible: false,
grpData: {app: this.$route.query.app, exp: this.$route.query.exp},
接下来我要在子组件中改变这两个属性的值传给父组件，先要在子组件中定义一下
props: {
grpVisible: {
type: Boolean,
default: false
},
grpData: {
type: Object
}
},
首先普通类型的 grpVisible 属性如果要修改，需要定义一个变量将 grpVisible 值复制给这个变量，然后再修改这个变量，传递给父组件，具体见代码
let demo1 = this.grpVisible
demo1 = true
this.$emit('updateData', demo1) //子组件
父组件通过acceptData的参数value接收这个值
acceptData (value) {
console.log(value)
}, //父组件
如果是对象的话，就需要用Object.assign拷贝一份新的赋值给一个变量，然后修改这个变量，传递给父组件，代码如下：
let demo1 = Object.assign({}, this.grpData)
demo1.app = 'binge'
this.$emit('updateData', demo1)
来源：https://segmentfault.com/a/1190000015712854
0
投稿猜你喜欢
- 本文给大家介绍Python文件处理相关知识，具体内容如下所示：1.文件的常见操作文件是日常编程中常用的操作，通常用于存储数据或应用系统的参数
1.图像直方图基本含义和绘制首先我们先要了解一下python三大剑客之一——matplotlib我们- 本文实例讲述了GO语言获取系统环境变量的方法。分享给大家供大家参考。具体实现方法如下：package mainimport ( &
- 目录一、介绍二、前提三、get的请求3.1 GET无参请求3.2 GET传参四、post请求五、Requests响应六、Request扩充七
- 本文实例讲述了PHP递归调用数组值并用其执行指定函数的方法。分享给大家供大家参考。具体分析如下：以下为wordpress原代码，为了偷懒，简
- 在应用系统开发初期，由于开发数据库数据比较少，对于查询SQL语句，复杂视图的编写，刚开始不会体会出SQL语句各种写法的性能优劣，但是如果将应
- 这个python的小案例是五子棋游戏的实现，在这个案例中，我们可以实现五子棋游戏的两个玩家在指定的位置落子，画出落子后的棋盘，并且根据函数判
- 前言为了便于精准排查问题，需要将当前的请求信息与当前执行的 SQL 信息设置对应关系记录下来，记录的 SQL 信息包括：执行 SQL 的当前
- Python3安装第三方爬虫库BeautifulSoup4，供大家参考，具体内容如下在做Python3爬虫练习时，从网上找到了一段代码如下：
- 本文实例讲述了mysql外键基本功能与用法。分享给大家供大家参考，具体如下：本文内容：什么是外键外键的增加外键的修改和删除外键的约束模式首发
- 如何将123456789转化成123,456,789这样的形式呢？很多流量大的站比如优酷都有这样的格式。也是设计程序最常用的算
- 如题在SQL中 SELECT ... FROM ... ORDER BY abc ASC; 如果abc是字符串，那么结果会按照a-z 中文按
- 表示文字链接最清楚的方式是“蓝色文字+下划线”，这是在浏览器发展过程中形成的。这个问题大家都说过很多次了，我也曾经说过。然而，这样的规范却总
- 可以使用条件断点，如图，在断点上右键可以设置，条件自己输入，python语法：来源：https://blog.csdn.net/daijig
- 1、注意：pool必须在 if __name__ == '__main__' 下面运行，不然会报错2、多进程内出现错误会直接
- python 循环while和for in简单实例#!/uer/bin/env python# _*_ coding: utf-8 _*_l
- 误区 #5: AWE在64位SQL SERVER中必须开启错误！ 在坊间流传的有关AWE的设置的各种版本
- Oblog4.6 ACCESS版转换为UCenterHome1.5的全过程1、 说明：
- 1. python中数字组成的列表转化为字符串或者一串数字f=[1,2,3,4]num=len(f)m='' #
- 目录1. 文件相关函数2. 函数_函数的参数2.1 函数2.2 函数的参数3. 收集参数4. 命名关键字_总结小提示：5. 小练习练习问题：
