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. TP框架基础(三)

    [系统常量信息] 获取系统常量信息: 如果加参数true,会分组显示: >系统常量信息里经常用到的是user里的路径 > APP_PATH =>string'./shop/' 项目路 ...

  2. 💡我们的表单解决方案 el-form-renderer

    前言 本文将介绍我们的表单解决方案 @femessage/el-form-renderer,展示我们在 Vue 技术栈下,我们是如何处理以下问题的: 表单项动态显示或隐藏 表单数据联动 表单输入/输出 ...

  3. win10下nodejs的安装及配置

    这里主要引用两篇文章,写的非常详细,也能解决你可能出现的问题 nodejs安装及配置 如何删除之前nodejs设置的 npm config set prefix .....

  4. java多线程核心api以及相关概念(一)

    这篇博客总结了对线程核心api以及相关概念的学习,黑体字可以理解为重点,其他的都是我对它的理解 个人认为这些是学习java多线程的基础,不理解熟悉这些,后面的也不可能学好滴 目录 1.什么是线程以及优 ...

  5. Android通过辅助功能实现抢微信红包原理简单介绍

    简书文章:https://www.jianshu.com/p/e1099a94b979 附抢红包开源项目地址,代码已全改为Kotlin了,已适配到最新微信7.0.5版本,如果对你有所帮助赏个star吧 ...

  6. python的enumerate lambda isinstance filter函数

    0x01:filter(function,iterable) filter()函数用于过滤序列,过滤掉不符合条件的元素,返回由符合条件元素组成的新列表. 接收两个参数,第一个为函数,第二个为序列(可迭 ...

  7. 使用JavaScript的XMLHttpRequest+fromdata 传递blob到后端

    需要上传网页录音文件到服务器,写的艰辛,终于好了,C#端的代码失败的留作纪念,JS端也有失败的案例,就不放上来了 JavaScript: var form = new FormData(); form ...

  8. html+css+dom补充

    补充1:页面布局 一般像京东主页左侧右侧都留有空白,用margin:0 auto居中,一般.w. <!DOCTYPE html> <html lang="en"& ...

  9. java学习笔记(中级篇)—java实现高质量图片压缩

    使用java几十行代码实现一个高质量图片压缩程序,再也不用去自己找网络的压缩程序啦!而且很多网上的工具还有水印或者其他的限制,自己动手写一个简单的应用,是再合适不过了. 一.实现原理 1.声明两个字符 ...

  10. TensorFlow学习笔记——深层神经网络的整理

    维基百科对深度学习的精确定义为“一类通过多层非线性变换对高复杂性数据建模算法的合集”.因为深层神经网络是实现“多层非线性变换”最常用的一种方法,所以在实际中可以认为深度学习就是深度神经网络的代名词.从 ...