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 ...
随机推荐
- python课堂整理2
一.字节和编码 1个字节是8位二进制 utf-8 表示一个中文要用3个字节 gbk 为中国汉字发明,2个字节可表示汉字 所以 utf-8 可以读gbk编码,而gbk去读utf-8 的内容会乱码 uni ...
- git取消链接并删除本地库
有的时候我们需要删除从GitHub上克隆下来的库 从github上clone一个仓库: git clone git@github.com:USERNAME/repo.git 在本地目录下关联远程rep ...
- JSP+java上传图片到服务器,并将地址保存至MYSQL + JSP网页显示服务器的图片
这两天遇到个需求——用户头像修改功能. 查了好多资料,不是代码不全,就是某些高端框架,卡了好久,今已实现,分享给大家,如果有更好的方法,非常感谢可以在下方评论区写出 一.整体项目架构 二.web.xm ...
- js异步解决方法
在浏览器端,耗时很长的操作都应该异步执行,避免浏览器失去响应,最好的例子就是Ajax操作.在服务器端,"异步模式"甚至是唯一的模式,因为执行环境是单线程的,如果允许同步执行所有ht ...
- DDMS 视图 Emulator Control 为灰色
Emulator Control 模拟发送短信时,发现所有选项均为灰色,如图所示: 解决方法: 确认以下四种情形或方法 已测试 Genymotion 模拟器和真机均不行,而Eclipse自带模拟器可以 ...
- Selenium+java - 下拉框处理
常见下拉框也分两种:一种是标准控件和非标准控件(一般为前端开发人员自己封装的下拉框),本篇文章中将重点讲解标准下拉框操作. 1.Select提供了三种选择某一项的方法 select.selectByI ...
- Python 与数据库交互
安装:pip3 install pymysql 引入模块在python3里:from pymysql import * 使用步骤:1.创建Connection对象,用于建立与数据库的连接,创建对象调用 ...
- Zabbix编译安装(全)
一.前言 (一).概述 Zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案,Zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系 ...
- 有趣的RPC理解
RPC(Remote Procedure Call)—远程过程调用,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议.RPC协议假定某些传输协议的存在,如TCP或UDP,为通 ...
- Git下载加速教程
方法一 大家普遍采取的是更改本地的host文件,然后cmd命令刷新 1.访问这里,依次获取下面三个url的ping的ip github.com github.global.ssl.fastly.net ...