[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "dialogVisible"

这个警告是因为你正在尝试直接修改一个作为 prop 传递给子组件的属性。由于子组件的 props 是由父组件传递的，它们应该是只读的，不应该被子组件直接修改。

解决这个问题的方法是，你可以在子组件中定义一个与 prop 同名的 data 或 computed 属性，并在该属性中使用 prop 的值。然后，你可以在子组件中修改该 data 属性，而不是直接修改 prop。

例如，假设你有一个名为 "MyDialog" 的组件，其中有一个名为 "dialogVisible" 的 prop。你可以在组件定义中添加一个 data 属性来存储 "dialogVisible" 的值，并在该属性中使用 prop 的值：

<template>
  <div>
    <button @click="showDialog">Show Dialog</button>
    <my-dialog :dialog-visible="dialogVisible" @update:dialog-visible="updateDialogVisible" />
  </div>
</template>

<script>
import MyDialog from './MyDialog.vue';

export default {
  components: {
    MyDialog,
  },
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
    updateDialogVisible(value) {
      this.dialogVisible = value;
    },
  },
};
</script>

在上面的代码中，我们定义了一个名为 "dialogVisible" 的 data 属性，用于存储 "dialogVisible" prop 的值。我们还定义了一个名为 "updateDialogVisible" 的方法，该方法将在子组件中触发事件时调用，并将子组件的值传递给父组件以更新 "dialogVisible" data 属性。

在子组件中，我们需要定义一个名为 "dialogVisible" 的 computed 属性，该属性使用父组件传递的 "dialogVisible" prop 值作为计算基础：

<template>
  <div>
    <dialog :visible="dialogVisible" />
  </div>
</template>

<script>
export default {
  props: {
    dialogVisible: Boolean,
  },
  computed: {
    dialogVisibleLocal: {
      get() {
        return this.dialogVisible;
      },
      set(value) {
        this.$emit('update:dialogVisible', value);
      },
    },
  },
};
</script>

在上面的代码中，我们定义了一个名为 "dialogVisibleLocal" 的 computed 属性，该属性使用父组件传递的 "dialogVisible" prop 值作为计算基础。我们还定义了一个 setter，该 setter 会触发一个名为 "update:dialogVisible" 的事件，该事件将传递子组件中修改后的值给父组件。

这样，在子组件中修改 "dialogVisible" 属性时，实际上是在修改子组件的本地 computed 属性，而不是直接修改父组件传递的 prop。这样就可以避免 Vue 的警告。