第七十四篇:Vue组件父子传值
好家伙,
1.组件之间的关系
在项目开发中,组件之间的最常见关系分为如下两种:
(1)父子关系
(2)兄弟关系
2.父子之间的数据共享
(1)父->子共享数据
父组件向子组件共享数据需要使用自定义属性.代码示例如下:
App.vue为Left.vue的父组件
其中,父组件要将数据传给子组件
这里我们通过自定义属性props去传值
Left.vue组件的代码如下:
<template>
<div>
<h3>msg的值为:{{ msg }}</h3>
<h3>user的值为:{{ user }}</h3>
</div> </template> <script>
export default {
props:['msg','user']
}
</script> <style> </style>
App.vue组件的代码如下:
<template>
<div id="app">
<HelloWorld/>
<Left :msg="message" :user="usertable"></Left>
</div>
</template> <script>
import HelloWorld from './components/HelloWorld.vue'
import Left from './components/Left.vue'
export default {
name: 'App',
data(){
return{
message:'ni hao shuai',
usertable:{ name:'wuyanzu',age:18 }
}
},
components: {
HelloWorld,
Left
}
}
</script>
看看效果:
可以看见,父子数值传值成功
补充:
不要修改props的值,让props的值为只读
(2)子->父共享数据
子组件向父组件共享数据使用自定义事件
现在我们又又又来假设一个用户需求:
我们来听听客户怎么说的:
创建一个按钮点击自增一的组件,
我希望我在点击这个按钮后,
子组件中可以看见数据的变化,
父组件也可以看见数据的变化,
(好明确的用户需求,虽然说这个客户就是我)
搞起来:
代码如下:
App.vue中:
<template>
<div id="app">
<h1>我是父组件</h1>
<h1>我的msg值为:{{message}}</h1>
<hr>
<h2>下面的是我的子组件</h2>
<hr>
<HelloWorld/> <Right @numchange="getnewmsg"></Right> </div>
</template> <script>
import HelloWorld from './components/HelloWorld.vue' import Right from './components/Right.vue' export default {
name: 'App',
data(){
return{
message:0,
usertable:{ name:'wuyanzu',age:18 }
}
},
components:{
HelloWorld,
Right
},
methods: {
getnewmsg(val){
//此处的val是子组件传过来的值
this.message=val;
console.log("getnewmsg方法被触发了")
}
}
}
</script>
Right.vue文件中:
<template>
<div>
<h3>msg的值为:{{ msg }}</h3>
<button @click="add">+1</button>
</div> </template> <script>
export default { data(){
return{
msg:0
}
},
methods:{
add(){
this.msg+=1;
//修改数据是,调用$emit()方法触发自定义事件
this.$emit('numchange',this.msg)
//一参为处理事件的名称,二参为传递的新值
//触发$emit则触发一参'事件名'的事件
}
}
}
</script> <style> </style>
其中,
this.$emit('numchange',this.msg)
单独拿出说一下,点击后,add方法被调用,
同时自定义方法'numchange'被定义,
父组件中,监听到'numchange'发生变化,
从而再触发 'getnewmsg'方法,
同时this.msg被传到numchange的val中
来看看效果:
(客户看了直摇头)
那么就基本上没什么问题了,
That's all
第七十四篇:Vue组件父子传值的更多相关文章
- Spring Cloud第十四篇 | Api网关Zuul
本文是Spring Cloud专栏的第十四篇文章,了解前十三篇文章内容有助于更好的理解本文: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 Spring C ...
- SpringBoot第二十四篇:应用监控之Admin
作者:追梦1819 原文:https://www.cnblogs.com/yanfei1819/p/11457867.html 版权声明:本文为博主原创文章,转载请附上博文链接! 引言 前一章(S ...
- Egret入门学习日记 --- 第十四篇(书中 5.4~5.6节 内容)
第十四篇(书中 5.4~5.6节 内容) 书中内容: 总结 5.4节 内容重点: 1.如何编写自定义组件? 跟着做: 重点1:如何编写自定义组件? 文中提到了重要的两点. 好,我们来试试看. 第一步, ...
- 解剖SQLSERVER 第十四篇 Vardecimals 存储格式揭秘(译)
解剖SQLSERVER 第十四篇 Vardecimals 存储格式揭秘(译) http://improve.dk/how-are-vardecimals-stored/ 在这篇文章,我将深入研究 ...
- 第十四篇 Integration Services:项目转换
本篇文章是Integration Services系列的第十四篇,详细内容请参考原文. 简介在前一篇,我们查看了SSIS变量,变量配置和表达式管理动态值.在这一篇,我们使用SQL Server数据商业 ...
- Python之路【第十四篇】:AngularJS --暂无内容-待更新
Python之路[第十四篇]:AngularJS --暂无内容-待更新
- 第三百七十四节,Django+Xadmin打造上线标准的在线教育平台—创建课程app,在models.py文件生成4张表,课程表、课程章节表、课程视频表、课程资源表
第三百七十四节,Django+Xadmin打造上线标准的在线教育平台—创建课程app,在models.py文件生成4张表,课程表.课程章节表.课程视频表.课程资源表 创建名称为app_courses的 ...
- 【译】第十四篇 Integration Services:项目转换
本篇文章是Integration Services系列的第十四篇,详细内容请参考原文. 简介在前一篇,我们查看了SSIS变量,变量配置和表达式管理动态值.在这一篇,我们使用SQL Server数据商业 ...
- “全栈2019”Java第七十四章:内部类与静态内部类相互嵌套
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
随机推荐
- Conda 虚拟环境移植
这时候你应该位于具有待移植的环境的服务器: 1 进入你要移植的环境 conda activate your_env 2 导出当前conda环境到某个文件(文件名字可以自定义) conda env ex ...
- 透过Redis源码探究字符串的实现
转载请声明出处哦~,本篇文章发布于luozhiyun的博客:https://www.luozhiyun.com 本文使用的Redis 5.0源码 概述 最近在通过 Redis 学 C 语言,不得不说, ...
- [WUSTCTF2020]朴实无华-1
1.打开连接只有如下界面: 2.用bp抓包分析包内数据,未发现有用的信息: 3.进行目录扫描,获得robots.txt文件并进行访问: 4.访问/fAke_f1agggg.ph ...
- BSS应用程序云原生部署的8大挑战
云原生部署改变了软件开发.根据云原生计算基金会(CNCF)2021年年度调查,96%的组织正在使用或评估Kubernetes.更确切地说,560万开发者在使用Kubernetes,比去年增加了67%. ...
- 【Pr】基础流程
新建工程 1.打开Pr 2.点击"新建""项目" 3.在电脑磁盘上新建好项目想要存放的位置,比如Demo1,为了便于管理,我先新建了一个Demo文件夹,再在里边 ...
- Systemverilog-- OOP--对象的拷贝
目录 浅拷贝: 定义拷贝函数: 拷贝函数总结: 浅拷贝: Packet p1; Packet p2; p1 = new; p2 = new p1; 在创建p2对象时,将从p1拷贝其成员变量例如 i ...
- 岭回归和LASSO
0.对于正则罚项的理解 1.岭回归(L2 ridge regression ) 是一种专用于共线性数据分析的有偏估计回归方法,实质上是一种改良的最小二乘估计法,通过放弃最小二乘法的无偏性,以损失部分信 ...
- 【python】自动更新pu口袋校园活动
[python]自动更新pu口袋校园活动 脚本目标: 1. 自动爬取pu口袋校园活动,筛选出需要的活动,此处我的筛选条件是线上活动,因为可以不用去就可以白嫖学时 2. 自动发送邮件到QQ邮箱,每次只发 ...
- ubuntu 20.04 安装 vim8.2
由于ubuntu 20.04自带的vim版本比较老了,有些新装的插件适配不上,所以需要安装最新版本的vim.在网上找了很久也没有比较官方的安装教程所以记录一下. 安装依赖库 sudo apt inst ...
- 乘风破浪,遇见未来新能源汽车(Electric Vehicle)之特斯拉提车必须知道的十个流程
订车 线下门店或者官网可以咨询和下单,一般来说,订金就是1000,还算可以接受. 订单账号 特斯拉账号是以邮箱为区分的,而不是手机号,我们下单的时候需要提供一个邮箱用来注册特斯拉账号. 注意了,敲黑板 ...