我们知道,父组件不能修改子组件的数据【这种说法是不严谨的】,严谨的说法是:子组件内部不能修改从父组件传递过来的值。原因是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. Traffic Network in Numazu

    Traffic Network in Numazu 题目描述 Chika is elected mayor of Numazu. She needs to manage the traffic in ...

  2. numpy模块介绍

    import numpy as np np.array([1,2,3]) array([1, 2, 3]) np.array([[1,2,3],[4,5,6]]) array([[1, 2, 3], ...

  3. 2)header的使用

    header() 函数向客户端发送原始的 HTTP 报头. 认识到一点很重要,即必须在任何实际的输出被发送之前调用 header() 函数(在 PHP 以及更高的版本中,您可以使用输出缓存来解决此问题 ...

  4. 【Linux_Shell 脚本编程学习笔记四、监控系统内存并报警企业案例脚本】

    前置知识:awk 参考学习博客:https://www.cnblogs.com/bugingcode/p/8287914.html awk 'BEGIN{ commands } pattern{ co ...

  5. 使用Cron表达式创建定时任务

    CronTriggerCronTrigger功能非常强大,是基于日历的作业调度,而SimpleTrigger是精准指定间隔,所以相比SimpleTrigger,CroTrigger更加常用.CroTr ...

  6. codeigniter注意点

    1. 数据的操作: insert 和update最好使用自带的db方法,1避免了过滤字符串和sql注入,2是数据量相对查询是非常小的. select则建议使用自己写的,这样便于优化. 2. 去掉ind ...

  7. [LC] 79. Word Search

    Given a 2D board and a word, find if the word exists in the grid. The word can be constructed from l ...

  8. 无标定量|有标定量|谱图计数|XIC|AMT数据库|RT对对齐|母离子|子离子|SILVER|SRM|iBAQ|APEX|差异蛋白筛选|MaxQuant|PANDA|C-HPP

    生物医学大数据-蛋白质定量 现今肽段定量效率存在巨大差异.比如相同质量蛋白质,但是肽段和蛋白信号不均一,在物理条件一致时,仅有70%的重复率,并且当重复次数变多时,overlapping在变少. 无标 ...

  9. Luogu_2279_[HNOI2003]消防局的设立

    题目描述 2020年,人类在火星上建立了一个庞大的基地群,总共有n个基地.起初为了节约材料,人类只修建了n-1条道路来连接这些基地,并且每两个基地都能够通过道路到达,所以所有的基地形成了一个巨大的树状 ...

  10. iOS开发之多线程(NSThread、NSOperation、GCD)

    整理一些多线程相关的知识. 并行 & 并发 1.并行:并行是相对于多核而言的,几个任务同时执行.2.并发:并发是相对于单核而言的,几个任务之间快速切换运行,看起来像是"同时" ...