好家伙,

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组件父子传值的更多相关文章

  1. Spring Cloud第十四篇 | Api网关Zuul

    ​ 本文是Spring Cloud专栏的第十四篇文章,了解前十三篇文章内容有助于更好的理解本文: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 Spring C ...

  2. SpringBoot第二十四篇:应用监控之Admin

    作者:追梦1819 原文:https://www.cnblogs.com/yanfei1819/p/11457867.html 版权声明:本文为博主原创文章,转载请附上博文链接! 引言   前一章(S ...

  3. Egret入门学习日记 --- 第十四篇(书中 5.4~5.6节 内容)

    第十四篇(书中 5.4~5.6节 内容) 书中内容: 总结 5.4节 内容重点: 1.如何编写自定义组件? 跟着做: 重点1:如何编写自定义组件? 文中提到了重要的两点. 好,我们来试试看. 第一步, ...

  4. 解剖SQLSERVER 第十四篇 Vardecimals 存储格式揭秘(译)

    解剖SQLSERVER 第十四篇    Vardecimals 存储格式揭秘(译) http://improve.dk/how-are-vardecimals-stored/ 在这篇文章,我将深入研究 ...

  5. 第十四篇 Integration Services:项目转换

    本篇文章是Integration Services系列的第十四篇,详细内容请参考原文. 简介在前一篇,我们查看了SSIS变量,变量配置和表达式管理动态值.在这一篇,我们使用SQL Server数据商业 ...

  6. Python之路【第十四篇】:AngularJS --暂无内容-待更新

    Python之路[第十四篇]:AngularJS --暂无内容-待更新

  7. 第三百七十四节,Django+Xadmin打造上线标准的在线教育平台—创建课程app,在models.py文件生成4张表,课程表、课程章节表、课程视频表、课程资源表

    第三百七十四节,Django+Xadmin打造上线标准的在线教育平台—创建课程app,在models.py文件生成4张表,课程表.课程章节表.课程视频表.课程资源表 创建名称为app_courses的 ...

  8. 【译】第十四篇 Integration Services:项目转换

    本篇文章是Integration Services系列的第十四篇,详细内容请参考原文. 简介在前一篇,我们查看了SSIS变量,变量配置和表达式管理动态值.在这一篇,我们使用SQL Server数据商业 ...

  9. “全栈2019”Java第七十四章:内部类与静态内部类相互嵌套

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

随机推荐

  1. 12.1 Android Studio如何手动下载Gradle文件

    实际操作过程中,可能由于各方面原因,导致Gradle无法下载,或者下载比较慢,这个时候,其实我们可以手动下载,或者找一个最近的版本,替换他. 确认要下载的版本 不论是用命令编译Android项目,还是 ...

  2. STC8H开发(十二): I2C驱动AT24C08,AT24C32系列EEPROM存储

    目录 STC8H开发(一): 在Keil5中配置和使用FwLib_STC8封装库(图文详解) STC8H开发(二): 在Linux VSCode中配置和使用FwLib_STC8封装库(图文详解) ST ...

  3. 等待唤醒机制代码实现_包子类&包子铺类和等待唤醒机制代码实现_吃货类&测试类

    资源类:包子类 设置包子的属性 皮 陷 包子的状态:有 true 没有 false public class BaoZi { //皮 String pi; //陷 String xian; //包子的 ...

  4. .NET(C#)发送邮件的实现方法

    .NET(C#)发送邮件的实现方法 微软已经为我们准备好了现成的工具类供我们调用: MailMessage //邮件信息类 SmtpClient //邮件发送类 首先需要在项目的类文件中引用以下命名空 ...

  5. for增强

    package study5ran2yl.study; public class ForDemo02 { public static void main(String[] args) { int[] ...

  6. Docker 安全及日志管理

    Docker 安全及日志管理 容器的安全性问题的根源在于容器和宿主机共享内核. 容器里的应用导致Linux内核崩溃,那么整个系统可能都会崩溃. 虚拟机并没有与主机共享内核,虚拟机崩溃一般不会导致宿主机 ...

  7. 关于 STrAduts

    \(\mathbb{No \ hay \ cosa \ mas \ feliz \ en \ el \ mundo \ que \ ver \ tu \ sonrisa \ mi \ [数据删除]}\ ...

  8. 中国顶级程序员,从金山WPS走出来,自研了“表格编程”神器

    程序员的圈子里有很多如明星般闪耀的牛人! 有中国"第一代程序员"--求伯君,有在微信获得巨大成功的张小龙,有图灵奖获得者姚期智,有商业巨子张一鸣,更有开源影响力人物--章亦春. 章 ...

  9. 华为交换机设置ntp时间同步

    操作交换机型号:Huawei S5720 查看时间发现时间不对 [HUAWEI]display clock 2021-04-01 21:41:35 Thursday Time Zone(Default ...

  10. ArrayList的操作和对象数组

    ArrayList是List接口的一个实现类,它是程序中最常见的一种集合. ArrayList内部的数据存储结构时候数组形式,在增加或删除指定位置的元素时,会创建新的数组,效率比较低,因此不适合做大量 ...