问题描述

• 使用element-ui的el-dialog做二次封装时修改visible.sync绑定值报错；
• 这是由于父组件通过props传参子组件，子组件改变自身的props值引起的
  

解决方案

父组件

<NoteBookLimitFlow :isVisible="isShowFlowSearch"></NoteBookLimitFlow>

子组件

<template>
  <el-dialog
    title="XXXX"
    :visible.sync="IsShowPage"
  />
</template>

<script>
export default {
  name: 'NoteBookLimitFlow',
  props: {
    isVisible: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  data() {
    return {
      // 定义一个IsShowPage来接收传递过来的值
      IsShowPage: this.isVisible
    }
  },

  watch: {
    isVisible(val) {
      this.IsShowPage = val// 新增isVisible的watch，监听变更并同步到IsShowPage上
    }
  }
}
</script>