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 ...
随机推荐
- 实现简单的 IOC 和 AOP
1 简单的 IOC 1.1 简单的 IOC 容器实现的步骤 加载 xml 配置文件,遍历其中的标签 获取标签中的 id 和 class 属性,加载 class 属性对应的类,并创建 bean 遍历标签 ...
- TP 5.0 架构 简介
TP 5.0 架构 简介 thinkphp 5.0 为API开发而设计的的高性能框架,是与以往thinkphp5.0以下版本大不相同的新型框架,病对以颠覆和重构版本,采用全新的架构思想,引入了更多的P ...
- Java--重载与重写的区别
1.重写必须继承,重载不用.2.重写的方法名,参数数目相同,参数类型兼容,重载的方法名相同,参数列表不同.3.重写的方法修饰符大于等于父类的方法,重载和修饰符无关.4.重写不可以抛出父类没有抛出的一般 ...
- linux初学者-磁盘加密篇
linux初学者-磁盘加密篇 因为保密需要,一般系统中会在文件和磁盘中进行加密,但是文件的加密比较容易破解,不安全.所以在特殊需要下,会对磁盘进行加密,磁盘加密后在磁盘损坏的同时,其中的数据也会损坏, ...
- Python之父新发文,将替换现有解析器
花下猫语: Guido van Rossum 是 Python 的创造者,虽然他现在放弃了"终身仁慈独裁者"的职位,但却成为了指导委员会的五位成员之一,其一举一动依然备受瞩目.近日 ...
- 写这篇博客之前,我又忘了“==”和equals的区别。
没错.嘟嘟又把==号和equals 的区别给忘掉了 ==号比较基本类型的时候比的是值,比较引用类型的时候比较的是地址.equals比较基本类型的时候.... 脑子里关于这道题的答案好模糊好没有安全感 ...
- python模块知识二 random -- 随机模块、序列化 、os模块、sys -- 系统模块
4.random -- 随机模块 a-z:97 ~ 122 A-Z :65 ~ 90 import random #浮点数 print(random.random())#0~1,不可指定 print( ...
- Reporting报表开发知识合并[个人原创]
[个人原创] ,转发请声明原文链接 了解 a) SSRS全称 SQL Server Reporting Services,是依赖于数据库运行的,是微软开发的重量级别的BI产品 b) ...
- PHP编码风格规范
由于PHP的灵活性,很多人写起代码来也不讲求一个好的代码规范,使得本就灵活的PHP代码看起来很乱,其实PSR规范中的PSR-1和PSR-2已经定义了在PHP编码中的一些规范,只要我们好好遵守这些规范, ...
- oracle的开窗函数
原创 select * from (select province, commodity, sum(price), ROW_NUMBER() OVER(PARTITION BY province o ...