• 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数值,所有改变的情况都已经清楚!

    【完】

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

  • 相关阅读:
    重点解说--MVVM指南(课程学习)
    模块划分--MVVM指南(课程学习)
    开发步骤--MVVM指南(课程学习)
    MVVM指南(课程学习)
    centos vi和vim用法
    阿里云centos系统上安装ftp
    thinkphp的ip地址定位
    thinkphp方便分页的page方法
    thinkphp data方法
    thinkphp i方法
  • 原文地址:https://www.cnblogs.com/tangjiao/p/9965125.html
Copyright © 2020-2023  润新知