第七十四篇: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第 ...
随机推荐
- 12.1 Android Studio如何手动下载Gradle文件
实际操作过程中,可能由于各方面原因,导致Gradle无法下载,或者下载比较慢,这个时候,其实我们可以手动下载,或者找一个最近的版本,替换他. 确认要下载的版本 不论是用命令编译Android项目,还是 ...
- STC8H开发(十二): I2C驱动AT24C08,AT24C32系列EEPROM存储
目录 STC8H开发(一): 在Keil5中配置和使用FwLib_STC8封装库(图文详解) STC8H开发(二): 在Linux VSCode中配置和使用FwLib_STC8封装库(图文详解) ST ...
- 等待唤醒机制代码实现_包子类&包子铺类和等待唤醒机制代码实现_吃货类&测试类
资源类:包子类 设置包子的属性 皮 陷 包子的状态:有 true 没有 false public class BaoZi { //皮 String pi; //陷 String xian; //包子的 ...
- .NET(C#)发送邮件的实现方法
.NET(C#)发送邮件的实现方法 微软已经为我们准备好了现成的工具类供我们调用: MailMessage //邮件信息类 SmtpClient //邮件发送类 首先需要在项目的类文件中引用以下命名空 ...
- for增强
package study5ran2yl.study; public class ForDemo02 { public static void main(String[] args) { int[] ...
- Docker 安全及日志管理
Docker 安全及日志管理 容器的安全性问题的根源在于容器和宿主机共享内核. 容器里的应用导致Linux内核崩溃,那么整个系统可能都会崩溃. 虚拟机并没有与主机共享内核,虚拟机崩溃一般不会导致宿主机 ...
- 关于 STrAduts
\(\mathbb{No \ hay \ cosa \ mas \ feliz \ en \ el \ mundo \ que \ ver \ tu \ sonrisa \ mi \ [数据删除]}\ ...
- 中国顶级程序员,从金山WPS走出来,自研了“表格编程”神器
程序员的圈子里有很多如明星般闪耀的牛人! 有中国"第一代程序员"--求伯君,有在微信获得巨大成功的张小龙,有图灵奖获得者姚期智,有商业巨子张一鸣,更有开源影响力人物--章亦春. 章 ...
- 华为交换机设置ntp时间同步
操作交换机型号:Huawei S5720 查看时间发现时间不对 [HUAWEI]display clock 2021-04-01 21:41:35 Thursday Time Zone(Default ...
- ArrayList的操作和对象数组
ArrayList是List接口的一个实现类,它是程序中最常见的一种集合. ArrayList内部的数据存储结构时候数组形式,在增加或删除指定位置的元素时,会创建新的数组,效率比较低,因此不适合做大量 ...