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

  1. vue父子组件的传值总结

    久违的博客园我又回来了.此篇文章写得是vue父子组件的传值,虽然网上已经有很多了.写此文章的目的就是记录下个人学习的一部分.接下来我们就进入主题吧! 在开发vue项目中,父子组件的传值是避免不掉的. ...

  2. vue父子组件之间传值

    vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...

  3. vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。

    vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...

  4. vue.js单文件组件中非父子组件的传值

    最近在研究vue.js,总体来说还算可以,但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题,今天在这里讲讲,希望对大家有所帮助! 在官网api中的这段讲解很少,也很模糊:官 ...

  5. Vue父子组件相互传值及调用方法的方案

    Vue父子组件相互传值及调用方法的方案 一.调用方法: 1.父组件调用子组件方法: 2.子组件调用父组件方法: 参考:https://www.cnblogs.com/jin-zhe/p/9523782 ...

  6. Vue父子,子父,非父子组件之间传值

    Vue组件基础 纯属随笔记录,具体详细教程,请查阅vue.js网站 子组件给父组件传值: <body> <div id="app"> <my-app& ...

  7. 关于element中的父子组件的传值问题

    首先讲一下父子组件的传值问题. 这是大家很熟悉的一张图,讲述了父子组件传值的过程.父组件通过prop传值给子组件,子组件通过$emit给父组件发送消息来使父组件的prop发生变化.这都是老生常谈了.下 ...

  8. vue项目中的父子组件之间的传值。

    首先说一下父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件.而在父组件中是不能直接调用子组件中的变量值的.下面详细说一下,父子组件之 ...

  9. vue 父子组件互相传值容易出现的报错

    对于父子组件之间的互相传值,报错如下: [Vue warn]: Avoid mutating a prop directly since the value will be overwritten w ...

随机推荐

  1. PHP正则匹配到2个字符串之间的内容,匹配HTML便签内容

    PHP正则匹配到2个字符串之间的内容 $preg= '/xue[\s\S]*?om/i'; preg_match_all($preg,"学并思网址xuebingsi.com",$r ...

  2. 从零开始实现ASP.NET Core MVC的插件式开发(三) - 如何在运行时启用组件

    标题:从零开始实现ASP.NET Core MVC的插件式开发(三) - 如何在运行时启用组件 作者:Lamond Lu 地址:https://www.cnblogs.com/lwqlun/p/112 ...

  3. 解决win10下MySQL 8.0登录Access denied for user 'root'@'localhost' (using password: YES)的问题

        近些时间在开始学MySQL,安装挺顺利的,按照网上现成的教程就能安装成功.     但是,在输入 mysql -uroot -p     再输入密码时,遇到了这个情况 Access denie ...

  4. kuberenetes CRD开发指南

    扩展kubernetes两个最常用最需要掌握的东西:自定义资源CRD 和 adminsion webhook, 本文教你如何十分钟掌握CRD开发. kubernetes允许用户自定义自己的资源对象,就 ...

  5. 前端插件之Select2使用

    工欲善其事,必先利其器 本系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件,上一篇文章介绍了bootstrap-duallistbox这个插件的使用,这一篇开始Select2的征服之旅 Se ...

  6. 1.4.3 ID遍历爬虫(每天一更)

    # -*- coding: utf-8 -*- ''' Created on 2019年5月7日 @author: 薛卫卫 ''' import itertools import urllib.req ...

  7. 终极CRUD-2-用lombok提高开发效率

    目录 1 lom介绍与基本使用 2 lombok 注意点 2.1 lombok自动生成方法可以混合自己写的方法 2.2 尽量不要使用@Data 2.3 属性不要使用基本类型 2.4 小心@ToStri ...

  8. Java 字符串分隔 split

    Java中的我们可以利用 split 方法(Java.lang.string.split)把字符串按照指定的分割符进行分割,然后返回字符串数组,下面是string.split的用法实例及注意事项. s ...

  9. 检测人脸及眼睛【OpenCV-Python实现 源码+打包.exe文件】

    之前用opencv做的一个人脸及双眼检测,在此分享给大家 链接:https://pan.baidu.com/s/1BsKBH3wOF9TmdbRlPagEVQ 提取码:cqkv 效果如下:

  10. git之coding.net的使用

    先在Coding上创建个项目     现在是这样,我本地有个项目Project(/Users/huang/Desktop/Project),我想把它上传到刚创建的项目里,以后就用git代码托管.可我之 ...