Vue 关于多个父子组件嵌套传值
prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。
props: {
selectMember: {
type: Boolean,
default: false
}
在子组件内的data对象中创建一个props属性的副本
data:(){
return{
seleectPersonMetting:this.selectMember
}
}
创建针对props属性的watch来同步组件外对props的修改
此时父组件修改了组件的props,会同步到子组件内对应的props上,但是不会同步到你刚刚在data对象中创建的那个副本上,所以需要再创建一个针对props属性result的watch,做事件派发$emit,当props修改后对应data中的副本myResult也要同步数据。
watch:{
selectMember(val){
this.seleectPersonMetting=val
},
seleectPersonMetting(val) {
this.$emit('select-mode', val);
}
}
在父组件上接收子组件watch过来的事件
接收子组件传递过来的自定义事件
<Right @select-mode='selectMde'></Right>
method:{
selectMde(val){
this.selectMeetingMemberMode = val
},
}
selectMember: {
type: Boolean,
default: false
Vue 关于多个父子组件嵌套传值的更多相关文章
- vue父子组件的传值总结
久违的博客园我又回来了.此篇文章写得是vue父子组件的传值,虽然网上已经有很多了.写此文章的目的就是记录下个人学习的一部分.接下来我们就进入主题吧! 在开发vue项目中,父子组件的传值是避免不掉的. ...
- vue父子组件之间传值
vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...
- vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- vue.js单文件组件中非父子组件的传值
最近在研究vue.js,总体来说还算可以,但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题,今天在这里讲讲,希望对大家有所帮助! 在官网api中的这段讲解很少,也很模糊:官 ...
- Vue父子组件相互传值及调用方法的方案
Vue父子组件相互传值及调用方法的方案 一.调用方法: 1.父组件调用子组件方法: 2.子组件调用父组件方法: 参考:https://www.cnblogs.com/jin-zhe/p/9523782 ...
- Vue父子,子父,非父子组件之间传值
Vue组件基础 纯属随笔记录,具体详细教程,请查阅vue.js网站 子组件给父组件传值: <body> <div id="app"> <my-app& ...
- 关于element中的父子组件的传值问题
首先讲一下父子组件的传值问题. 这是大家很熟悉的一张图,讲述了父子组件传值的过程.父组件通过prop传值给子组件,子组件通过$emit给父组件发送消息来使父组件的prop发生变化.这都是老生常谈了.下 ...
- vue项目中的父子组件之间的传值。
首先说一下父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件.而在父组件中是不能直接调用子组件中的变量值的.下面详细说一下,父子组件之 ...
- vue 父子组件互相传值容易出现的报错
对于父子组件之间的互相传值,报错如下: [Vue warn]: Avoid mutating a prop directly since the value will be overwritten w ...
随机推荐
- C# backgroundwork的使用方法
引言:在 WinForms 中,有时要执行耗时的操作,在该操作未完成之前操作用户界面,会导致用户界面停止响应.解决的方法就是新开一个线程,把耗时的操作放到线程中执行,这样就可以在用户界面上进行其它操作 ...
- 今天来聊Java ClassLoader
背景 类加载机制作为一个高频的面试题经常会在面试中被问到,前几天一个电话面试就问到,之前有了解过,但是没有梳理成自己的体系,所以说的有点凌乱,今天花点时间整理一下,分享给大家同时自己也好好梳理一下,顺 ...
- 【iOS】NSString rangeOfString
今天遇到了 NSString 的 rangeOfString 方法,刚遇到的时候不知道什么作用, 网上找到了一篇文章,介绍得挺简洁,代码如下: NSString *str1 = @"can ...
- spring注解不支持静态变量注入
spring注解不支持静态变量注入:今天敲代码 自动配置 配置: Animal.java package study01_autoconfig.beanConfig; import org.spri ...
- spark shuffle写操作之SortShuffleWriter
提出问题 1. spark shuffle的预聚合操作是如何做的,其中底层的数据结构是什么?在数据写入到内存中有预聚合,在读溢出文件合并到最终的文件时是否也有预聚合操作? 2. shuffle数据的排 ...
- 限流降级神器,带你解读阿里巴巴开源 Sentinel 实现原理
Sentinel 是阿里中间件团队开源的,面向分布式服务架构的轻量级高可用流量控制组件,主要以流量为切入点,从流量控制.熔断降级.系统负载保护等多个维度来帮助用户保护服务的稳定性. 大家可能会问:Se ...
- JAVA基础——Switch条件语句
JAVA基础——switch 条件语句 switch语句结构: switch(表达式){ case值1: 语句体1: break: case值2: 语句体2: break: case值3: 语句体3: ...
- koa2基于stream(流)进行文件上传和下载
阅读目录 一:上传文件(包括单个文件或多个文件上传) 二:下载文件 回到顶部 一:上传文件(包括单个文件或多个文件上传) 在之前一篇文章,我们了解到nodejs中的流的概念,也了解到了使用流的优点,具 ...
- 佳木斯集训Day3
D3是我的巅峰 D3的出题人毒瘤!!!T3放了一道莫队,我们全体爆炸,到现在只有一个奆老A掉了T3 据说lkh被晓姐姐D了 T1是个26进制数,当时在考场上想了好久才想到(太次了)注意需要处理一下溢出 ...
- Mysql索引进阶入门
1. 索引操作 MySQL 索引 菜鸟 2. 索引类型 PRIMARY 唯一且不能为空:一张表只能有一个主键索引 INDEX 普通索引 UNIQUE 唯一性索引 FULLTEXT 全文索引:用于搜索很 ...