好家伙,

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. Conda 虚拟环境移植

    这时候你应该位于具有待移植的环境的服务器: 1 进入你要移植的环境 conda activate your_env 2 导出当前conda环境到某个文件(文件名字可以自定义) conda env ex ...

  2. 透过Redis源码探究字符串的实现

    转载请声明出处哦~,本篇文章发布于luozhiyun的博客:https://www.luozhiyun.com 本文使用的Redis 5.0源码 概述 最近在通过 Redis 学 C 语言,不得不说, ...

  3. [WUSTCTF2020]朴实无华-1

    1.打开连接只有如下界面:    2.用bp抓包分析包内数据,未发现有用的信息:    3.进行目录扫描,获得robots.txt文件并进行访问:       4.访问/fAke_f1agggg.ph ...

  4. BSS应用程序云原生部署的8大挑战

    云原生部署改变了软件开发.根据云原生计算基金会(CNCF)2021年年度调查,96%的组织正在使用或评估Kubernetes.更确切地说,560万开发者在使用Kubernetes,比去年增加了67%. ...

  5. 【Pr】基础流程

    新建工程 1.打开Pr 2.点击"新建""项目" 3.在电脑磁盘上新建好项目想要存放的位置,比如Demo1,为了便于管理,我先新建了一个Demo文件夹,再在里边 ...

  6. Systemverilog-- OOP--对象的拷贝

    ​ 目录 浅拷贝: 定义拷贝函数: 拷贝函数总结: 浅拷贝: Packet p1; Packet p2; p1 = new; p2 = new p1; 在创建p2对象时,将从p1拷贝其成员变量例如 i ...

  7. 岭回归和LASSO

    0.对于正则罚项的理解 1.岭回归(L2 ridge regression ) 是一种专用于共线性数据分析的有偏估计回归方法,实质上是一种改良的最小二乘估计法,通过放弃最小二乘法的无偏性,以损失部分信 ...

  8. 【python】自动更新pu口袋校园活动

    [python]自动更新pu口袋校园活动 脚本目标: 1. 自动爬取pu口袋校园活动,筛选出需要的活动,此处我的筛选条件是线上活动,因为可以不用去就可以白嫖学时 2. 自动发送邮件到QQ邮箱,每次只发 ...

  9. ubuntu 20.04 安装 vim8.2

    由于ubuntu 20.04自带的vim版本比较老了,有些新装的插件适配不上,所以需要安装最新版本的vim.在网上找了很久也没有比较官方的安装教程所以记录一下. 安装依赖库 sudo apt inst ...

  10. 乘风破浪,遇见未来新能源汽车(Electric Vehicle)之特斯拉提车必须知道的十个流程

    订车 线下门店或者官网可以咨询和下单,一般来说,订金就是1000,还算可以接受. 订单账号 特斯拉账号是以邮箱为区分的,而不是手机号,我们下单的时候需要提供一个邮箱用来注册特斯拉账号. 注意了,敲黑板 ...