Vue父子组件通讯
我们知道,父组件不能修改子组件的数据【这种说法是不严谨的】,严谨的说法是:子组件内部不能修改从父组件传递过来的值。原因是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父子组件通讯的更多相关文章
- 深入理解Vue父子组件通讯的属性和事件
在html中使用元素,会有一些属性,如class,id,还可以绑定事件,自定义组件也是可以的.当在一个组件中,使用了其他自定义组件时,就会利用子组件的属性和事件来和父组件进行数据交流. 父子组件之间的 ...
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
- 【转】vue父子组件之间的通信
vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...
- Angular6 基础(数据绑定、生命周期、父子组件通讯、响应式编程)
Angular相比于vue来说,更像一个完整的框架,本身就集成了很多模块,如路由,HTTP,服务等,而vue是需要另外引入比如(vuex,axios等).Angular引入了依赖注入.单元测试.类等后 ...
- vue的组件通讯
Vue的组件通讯又称组件传值 一.父子组件传值: 父组件: <子组件名 :动态变量名 (随便起)='你想要传递的数据' ></子组件名> 子组件: 利用 prop去接收父组 ...
- vue父子组件之间传值
vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...
- vue父子组件的传值总结
久违的博客园我又回来了.此篇文章写得是vue父子组件的传值,虽然网上已经有很多了.写此文章的目的就是记录下个人学习的一部分.接下来我们就进入主题吧! 在开发vue项目中,父子组件的传值是避免不掉的. ...
- Vue父子组件生命周期
转载自:https://blog.csdn.net/a8725585/article/details/79092505 vue父子组件钩子函数触发顺序 beforeMount后mounted前构造子组 ...
- vue父子组件传值加例子
例子:http://element-cn.eleme.io/#/zh-CN/component/form 上进行改的 父传子:用prop:子组件能够改变父组件的值,是共享的,和父操作是 ...
随机推荐
- highcharts 柱状图在柱子顶部显示y轴数据
var plotOptions={ column:{ //borderColor: "#CCCC66",//边框 shadow: true, //阴影 dataLabels:{ / ...
- Chrome开发者调试工具
参考资料 Chrome Console不完全指南 Chrome使用技巧 Chrome开发工具详解 结束语 工欲善其事,必先利其器.
- 深入 Java 调试体系: 第 1 部分,JPDA 体系概览
JPDA 概述 所有的程序员都会遇到 bug,对于运行态的错误,我们往往需要一些方法来观察和测试运行态中的环境.在 Java 程序中,最简单的,您是否尝试过使用 System.out.println( ...
- 修改npm安装的全局路径和配置环境变量
我之前安装npm时全是默认安装,模块全部安装在C盘了,今天心血来潮,把路径改到了D盘,结果改完后模块都不能识别了,都提示XX模块不是内部命令,这其实是环境变量配置的问题,我都是按照网上的教程改的环境变 ...
- 吴裕雄--天生自然KITTEN编程:忍者追宝
- 将项目导入myeclipse后 tortoise svn 右键项目不能更新和提交
使用 tortoise svn客户端将svn服务器上的项目checkout之后正常,可以更新也可以提交:当将这个项目导入MyEclipse之后,不能更新和提交了只出现svn升级工作副本这一字样:网上搜 ...
- k8s集群搭建(三)
Dashboard安装 Kubernetes Dashboard是k8s提供基于Web的监控和操作界面,可以通过UI来显示集群的所有工作负载,除了查看资源,还是创建.编辑.更新.删除资源. 根据Kub ...
- Ubunt 16.04 安装 Beyond compare 4
1. 下载安装包: 2. 安装步骤 3. 运行并注册 之前Beyond compare 3 只有32位,在Ubunt 16.04上运行效率非常低,所以只有安装最新的Beyond compare 4,安 ...
- linux中nginx、mysql安装碰到的问题
服务器到期新买了一台服务器,记录一下重新安装基本环境碰到了一些问题 安装nginx 1. 启动失败 403 forbidden nginx 解决方案:(个人使用直接用了root账号,修改对应nginx ...
- openpyxl(python操作Excel)
一.安装 >>> pip install openpyxl import openpyxl 二.常用操作 1.创建与保存一个工作簿 wb = openpyxl.Workbook() ...