如何使用道具 vuejs 在子组件中打开和关闭模式？答案

【问题标题】：How to open and close a modal within a child component using a prop, vuejs?如何使用道具 vuejs 在子组件中打开和关闭模式？
【发布时间】：2020-05-03 21:07:27
【问题描述】：

我目前有以下子组件

  <Edit
     @fetchInfo="fetchInfo"
     :agencyData="agency"
     :dialogEdit.sync="dialogEdit"
   ></Edit>

基本上包含一个模态

一开始是假的，以免显示模态：

data(){
 return {
    dialogEdit: false
 }
}

通过我做的方法：

open(){
  this.dialogEdit = true;
}

在我的<Edit></Edit> 组件中，我有：

<el-dialog title="Editar" :visible.sync="dialogEdit" width="60%">
</el-dialog>

并通过道具收到：

 props: ["dialogEdit"],

但是当从子组件关闭模式时，我收到一个错误

[Vue 警告]：避免直接改变一个 prop，因为它的值会是每当父组件重新渲染时被覆盖。相反，使用基于道具值的数据或计算属性。道具存在变异：“对话框编辑”

【问题讨论】：

你能显示关闭模式的代码吗？确保您没有直接更改道具的值
This 可能会对您有所帮助。

标签： vue.js components

【解决方案1】：

首先，显然您正在使用 Element UI。

但是，正如错误所暗示的，您正在直接修改dialogEdit。通过单击X 关闭元素ui 模式时，dialogEdit 变为false。您可以使用计算属性解决此问题，例如 this answer 中所建议的。

由于您使用的是 Element UI，因此您还有另一种可能来解决这个问题。该对话框具有事件before-close，该事件在模式关闭之前触发。在那里，您可以将 dialogEdit 的新布尔值发送给父级。因此，将:dialogEdit.sync="dialogEdit" 保留在子标签中，并将before-close 添加到对话框和要处理的函数中，在其中发出新的false 值：

<el-dialog title="Editar" :before-close="handleClose" ....>

JS：

methods: {
  handleClose() {
    this.$emit('update:dialogEdit', false);
  }
},

如果你的模态中有一些按钮来关闭模态，你可以在那里添加相同的功能：

<el-button type="primary" @click="handleClose">Close</el-button>

SANDBOX

【讨论】：

【解决方案2】：

很难理解你的问题。你应该详细说明。

所有这些都在同一个文件中吗？如果在这种情况下您不需要创建props，因为data() 部分中已经有 dialogEdit。 props 值永远不会重新定义，所以如果是这种情况，只需删除道具。

如果这不能解决您的问题，请更新您的问题并提供更好的解释，因为我只看到一个文件。

【讨论】：