我们知道,父组件不能修改子组件的数据【这种说法是不严谨的】,严谨的说法是:子组件内部不能修改从父组件传递过来的值。原因是vue遵循的是数据单向流原则,父组件传递数据给子组件只能单向绑定,通过Props,子组件通过$emit发射自定义事件传参到父组件,而数据的改变是只能父组件改变父组件的,子组件改变子组件的。

说到底,Props里面的数据其实是父组件的,所以子组件不能私自修改,若修改Vue会报错不让修改。Props里面的数据其实是子组件去获取父组件的数据,子组件无权修改,只有父组件能做修改。

那么:子组件若是想要修改父组件传递过来的Props数据呢?

答:子组件自己不能修改,可以传参给父组件,让父组件自己去做修改即可。

子组件内部定义一个局部变量,用prop初始化,然后定义一个计算属性处理prop的值并返回。

我们知道,各自组件可以修改自己的data属性的参数值,那么,如何在父组件中修改子组件data里面的数据呢?

可以通过在父组件调用子组件:<notice-add ref="notice_add"></notice-add>加上ref属性,这样在父组件里面就可以:

this.$refs.notice_add.dialogFormVisible = true;

在父组件里面这样子操作子组件data里面的参数了,本质其实还是子组件修改内部数据。

至此,父组件通过Props传参给子组件,子组件通过$emit事件传参给父组件,也可以在父组件调用子组件事件或者改变子组件data数值,所有改变的情况都已经清楚!

【完】

连死都不怕,你还怕什么?

Vue父子组件通讯的更多相关文章

  1. 深入理解Vue父子组件通讯的属性和事件

    在html中使用元素,会有一些属性,如class,id,还可以绑定事件,自定义组件也是可以的.当在一个组件中,使用了其他自定义组件时,就会利用子组件的属性和事件来和父组件进行数据交流. 父子组件之间的 ...

  2. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

  3. 【转】vue父子组件之间的通信

    vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...

  4. Angular6 基础(数据绑定、生命周期、父子组件通讯、响应式编程)

    Angular相比于vue来说,更像一个完整的框架,本身就集成了很多模块,如路由,HTTP,服务等,而vue是需要另外引入比如(vuex,axios等).Angular引入了依赖注入.单元测试.类等后 ...

  5. vue的组件通讯

    Vue的组件通讯又称组件传值 一.父子组件传值: 父组件: <子组件名   :动态变量名 (随便起)='你想要传递的数据' ></子组件名> 子组件: 利用 prop去接收父组 ...

  6. vue父子组件之间传值

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

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

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

  8. Vue父子组件生命周期

    转载自:https://blog.csdn.net/a8725585/article/details/79092505 vue父子组件钩子函数触发顺序 beforeMount后mounted前构造子组 ...

  9. vue父子组件传值加例子

    例子:http://element-cn.eleme.io/#/zh-CN/component/form         上进行改的 父传子:用prop:子组件能够改变父组件的值,是共享的,和父操作是 ...

随机推荐

  1. highcharts 柱状图在柱子顶部显示y轴数据

    var plotOptions={ column:{ //borderColor: "#CCCC66",//边框 shadow: true, //阴影 dataLabels:{ / ...

  2. Chrome开发者调试工具

    参考资料 Chrome Console不完全指南 Chrome使用技巧 Chrome开发工具详解 结束语 工欲善其事,必先利其器.

  3. 深入 Java 调试体系: 第 1 部分,JPDA 体系概览

    JPDA 概述 所有的程序员都会遇到 bug,对于运行态的错误,我们往往需要一些方法来观察和测试运行态中的环境.在 Java 程序中,最简单的,您是否尝试过使用 System.out.println( ...

  4. 修改npm安装的全局路径和配置环境变量

    我之前安装npm时全是默认安装,模块全部安装在C盘了,今天心血来潮,把路径改到了D盘,结果改完后模块都不能识别了,都提示XX模块不是内部命令,这其实是环境变量配置的问题,我都是按照网上的教程改的环境变 ...

  5. 吴裕雄--天生自然KITTEN编程:忍者追宝

  6. 将项目导入myeclipse后 tortoise svn 右键项目不能更新和提交

    使用 tortoise svn客户端将svn服务器上的项目checkout之后正常,可以更新也可以提交:当将这个项目导入MyEclipse之后,不能更新和提交了只出现svn升级工作副本这一字样:网上搜 ...

  7. k8s集群搭建(三)

    Dashboard安装 Kubernetes Dashboard是k8s提供基于Web的监控和操作界面,可以通过UI来显示集群的所有工作负载,除了查看资源,还是创建.编辑.更新.删除资源. 根据Kub ...

  8. Ubunt 16.04 安装 Beyond compare 4

    1. 下载安装包: 2. 安装步骤 3. 运行并注册 之前Beyond compare 3 只有32位,在Ubunt 16.04上运行效率非常低,所以只有安装最新的Beyond compare 4,安 ...

  9. linux中nginx、mysql安装碰到的问题

    服务器到期新买了一台服务器,记录一下重新安装基本环境碰到了一些问题 安装nginx 1. 启动失败 403 forbidden nginx 解决方案:(个人使用直接用了root账号,修改对应nginx ...

  10. openpyxl(python操作Excel)

    一.安装 >>> pip install openpyxl import openpyxl 二.常用操作 1.创建与保存一个工作簿 wb = openpyxl.Workbook() ...