vue.runtime.esm.js:619 [Vue warn]: Avoid mutating a prop directly since the value will be overwritte

最新推荐文章于 2024-09-06 10:38:18 发布

涳涳嘚慌

最新推荐文章于 2024-09-06 10:38:18 发布

阅读量1w

点赞数 7

分类专栏：笔记文章标签： vue vue.js 前端

原文链接：https://www.cnblogs.com/ahao214/p/11127384.html

版权

笔记专栏收录该内容

27 篇文章 0 订阅

订阅专栏

文章目录

问题描述

使用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>