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()方法：

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

  子组件代码：

<template>

   <div class="">

        <el-dialog

        title="添加规格参数"

        :visible=dialogable

        width="70%"

        >

        <el-form :model="paramsForm"  ref="ruleForm" label-width="100px"

       

        class="demo-ruleForm">

          <el-form-item label="规格参数ID" prop="id">

            <el-input v-model="paramsForm.id"></el-input>

          </el-form-item>

          <el-form-item label="类目ID" prop="itemCatId">

            <el-input v-model="paramsForm.itemCatId"></el-input>

          </el-form-item>

          <el-form-item label="规格名称" prop="specsName">

            <el-input v-model="paramsForm.specsName"></el-input>

          </el-form-item>

         

          <el-form-item label="规格参数" prop="paramData">

            <el-input v-model="paramsForm.paramData"></el-input>

          </el-form-item>

          <el-form-item>

            <div class="footer">

              <el-button @click="closeDialog">取消</el-button>

              <el-button type="primary" @click="submitForm()">确定</el-button>

            </div>

          </el-form-item>

        </el-form>

        </el-dialog>

   </div>

</template>

<script>

export default {

  name: 'AddParams',

  components: {},

  props:['dialogable'],

  data () {

   

    return {

       

        paramsForm:{

          id:'',

          itemCatId:'',

          specsName:'',

          paramData:''

      }

    }

  },

  methods:{

    closeDialog(){

     // this.dialogable=false

      this.$emit('closeDialog')

    }

  }

}

</script>

<style>

</style>

 父组件部分代码：

   <!-- 对话框 -->

    <div class="myform">

    <AddParams :dialogable="dialogable" @closeDialog='closeDialog'/>   //这里引入子组件并且绑定事件

    </div>

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

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

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

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

 closeDialog(){

      this.dialogable=false

    }

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