• Unexpected mutation of “dialogable“ prop.eslintvue/no-mutating-props


    今天写弹框组件时报错Unexpected mutation of "dialogable" prop.eslintvue/no-mutating-props

    然后去搜了一下答案,我觉得有篇文章的概念讲的不错:

    其实这就是Vue的单向数据流的概念,因为识别到子组件中修改了props值。

    单向数据流


    父组件通过props将数据的更新向下流动到子组件中,子组件中所有的 props 都将会实时更新为最新值。
    但是反过来则不行。不应该在子组件内部修改定义好的props。
    这是Vue防止从子组件意外变更新父级组件的状态内容,这样会导致你应用的数据流向杂乱无章。

     然后我这里的解决是使用了emit,因为是要在子组件中改变父组件的数据嘛,

    $emit()方法:

    首先在父组件中定义一个自定义事件来接收子组件传过去的事件来触发自定义事件,简单点就是要先在父组件中准备一个方法,然后在子组件中有一个事件可以触发父组件中的那个方法,然后就可以在这个自定义事件中修改子组件的值。对父子通信概念不太理解可以看看这篇文章:点这里

      子组件代码:

     父组件部分代码:

       

       

           //这里引入子组件并且绑定事件

       

    dialogable这个是变量控制对话框显示与隐藏

    closeDialog:自定义事件和触发方法我都是使用同一个名字

    import AddParams from './addParams.vue';   //引入子组件 在script中

    定义一个事件用来改变子组件的值:

     closeDialog(){

          this.dialogable=false

        }

    参考:http://t.csdn.cn/Zw4Iq

     

  • 相关阅读:
    BST搜索二叉树
    【C++11】Lambda 表达式:基本使用 和 底层原理
    Sql 语句小课堂7:在sqlserver对多行数据实施随机数
    工业智能网关BL110应用之四十九: 数据上传华为云的配置
    SpringMVC笔记——SpringMVC配置类取代xml配置
    电脑重装系统后如何把网站设为首页
    Maven解决静态资源过滤问题
    ahk系列——ahk_v2实现win10任意界面ocr
    什么是Vue的JSX语法?如何使用JSX语法
    面向对象详解,面向对象的三大特征:封装、继承、多态
  • 原文地址:https://blog.csdn.net/qq_51580852/article/details/126171847