时间戳

首页 > 解决方案 > 如何使用道具 vuejs 在子组件中打开和关闭模式？

vue.js - 如何使用道具 vuejs 在子组件中打开和关闭模式？

问题描述

我目前有以下子组件

  <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，因为每当父组件重新渲染时，该值都会被覆盖。相反，使用基于道具值的数据或计算属性。正在变异的道具：“dialogEdit”

标签： vue.jscomponents

解决方案

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

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

由于您使用的是 Element UI，因此您还有另一种解决此问题的可能性。该对话框具有在before-close模式关闭之前触发的事件。dialogEdit在那里，您可以向父级发出新的布尔值。所以保留:dialogEdit.sync="dialogEdit"in 子标签并将其添加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>

沙盒

推荐阅读