Question

我有一个组件，其中有一个简单的v-dialog可以向用户显示一条消息，而有一个v-btn可以将其关闭。情况是：

用户单击显示v-dialog组成部分的按钮。
用户单击v-btn以关闭组件
在控制台上触发了错误：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: "show"
如果再次单击该按钮以打开对话框，则该对话框不会重新打开，因为data() show不会更改组件v-btn中的值。

对话框组件 BasicMessageDialog.vue

<template>
  <div class="text-center">
    <v-dialog v-if="showDialog" width="500">
      <v-card>
        <v-card-title primary-title class="title">Ops...</v-card-title>
        <v-card-text class="body-1">{{message}}</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn text color="primary" @click="show = false" class="body-1">Beleza!</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
export default {
  name: "BasicMessageDialog",
  computed: {
    showDialog() {
      return this.show;
    }
  },
  props: {
    show: Boolean,
    message: String
  }
};
</script>

<style>
</style>

主要组件 Login.vue

<template>
...
 <BasicMessageDialog :message="messageBasicDialog" :show="showBasicMessageDialog">
...
</BasicMessageDialog>
</template>

<script>
import BasicMessageDialog from "@/components/BasicMessageDialog";

export default {
  name: "Login",
  components: {
    BasicMessageDialog
  },
data: () => ({
      showBasicMessageDialog: false,
      messageBasicDialog: "",
)},
methods: {
    forgetPassword() {
      console.log("forgetPassword");
      if (this.email == "") {
        this.messageBasicDialog = "Digite o e-mail no campo!";
        this.showBasicMessageDialog = true;
      }
    }
}

</script>

Answer 1

这是因为您更新了对话框组件中的显示道具，其中显示数据来自您的父代。这就是为什么它返回Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.

的警告的原因

要解决您的问题，请采取以下几种方法来预防该警告。

首先，当您单击对话框按钮或单击对话框外部时，必须在对话框组件中发出一个事件。喜欢这个。

在您的V-dialog component中

。当用户点击按钮时

<v-btn text color="primary" @click="this.$emit('hideModal')" class="body-1">Beleza!</v-btn>

现在您的父组件中应该收到此事件。像这样的父组件

<BasicMessageDialog :message="messageBasicDialog" :show="showBasicMessageDialog" @hideModal='showBasicMessageDialog = false'>
...
</BasicMessageDialog>

现在，再次出现的问题是，如果用户单击对话框的外部而不是按钮，该怎么办？为了解决这个问题，您必须注意show prop的值。像这个。 In your v-dialog组件将其放置。

watch: {
   show(val) {
      if(!val) {
         this.$emit('hideModal')
      }
   }
}

现在一切正常。

第二是使用vue .sync修饰符

为方便起见，Vue js为该模式提供了简写形式， .sync修饰符。请在sync modifier这里阅读文档。这种方法将使您避免发出事件。不幸的是，真正的双向绑定会产生维护问题。

最后是要使用状态管理vuex

它用作集中存储所有组件中的应用程序，其中的规则确保只能更改状态。此处的文档vuex 一种可预测的方式。

Answer 2

  <v-btn text color="primary" @click="show = false" class="body-1">Beleza!</v-btn>

您不能像错误地说的那样更改prop，而不必添加功能，将其作为prop发送，并在需要更改prop值时调用，而父级必须处理该函数并更改数据。

<template>
    ...
 <BasicMessageDialog :message="messageBasicDialog" :show="showBasicMessageDialog" :hide="showBasicMessageDialog=!showBasicMessageDialog">
...
</BasicMessageDialog>
</template>

和

<v-btn text color="primary" @click="hide" class="body-1">Beleza!</v-btn>

https://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow

使用Vuetify v-dialog

2 个答案: