zoukankan      html  css  js  c++  java
  • 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数值,所有改变的情况都已经清楚!

    【完】

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

  • 相关阅读:
    Codeforces Round #634 E2. Three Blocks Palindrome (hard version)(双指针/前缀和/二分/好题)
    Codeforces Round #634 D. Anti-Sudoku(构造/水)
    自动化----docker
    自动化---zabbbix监控
    awk使用
    自动化-KVM安装
    nginx教程以及正则
    自动化-cobbler
    Python
    自动化kickstart
  • 原文地址:https://www.cnblogs.com/tangjiao/p/9965125.html
Copyright © 2011-2022 走看看