如何使用prop，vuejs在子组件中打开和关闭模态？

Question

我目前具有以下子组件

  <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警告]：避免直接更改道具，因为该值将是父组件重新渲染时覆盖。而是使用数据或基于属性值的计算属性。道具被变异：“ dialogEdit”

Answer 1

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

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

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

Answer 2

首先，显然您正在使用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