VueJS 错误避免直接改变道具

Question

我正在尝试创建模态框，但仅在关闭时出现此错误：

[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: "value"

found in

---> <PanelDesconectarModal> at resources\assets\vue\PanelDesconectarModal.vue
       <VNavigationDrawer>
         <PanelDrawer> at resources\assets\vue\PanelDrawer.vue
           <VApp>
             <PanelRoot> at resources\assets\vue\PanelRoot.vue
               <VApp>
                 <Root>

PanelDesconectarModal.vue

<template>
    <v-dialog v-model="value" max-width="350">
        <v-card :dark="($theme === 'dark')">
            <v-card-title class="headline">Desconectar</v-card-title>
            <v-divider></v-divider>
            <v-card-text>Você tem certeza que deseja desconectar-se?</v-card-text>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn flat @click.native="closeDialog">Cancelar</v-btn>
                <v-btn :color="$color" flat="flat" @click.native="desconectar">Desconectar</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
    export default {
        name: 'panel-desconectar-modal',
        props: ['value'],
        methods: {
            closeDialog() {
                this.value = false;
            },
            desconectar() {
                this.closeDialog();

                window.location = this.$route + '/panel/desconectar';
            }
        }
    }
</script>

使用ProgressDesconectarModal.vue，showDesconectar 是一个数据变量

<panel-desconectar-modal :value="showDesconectar"></panel-desconectar-modal>

Answer 1

你不应该改变你的子组件中的道具。您只能改变对象而不能改变基元。因此，您可以使用数据选项或计算的属性:

data() {
  return {
    childValue: this.value; // initialize props value
  }
}

现在，您可以更改 childValue:

closeDialog() {
   this.childValue = false;
},

确保在子组件中的所有位置都使用 childValue 而不是 value 属性。

Answer 2

发生这种情况是因为您的 v-model 中有道具 value。

不要那样做，因为这会在 v-model 改变时改变 prop(value)（你应该只用 v-model afaik 改变 data 值，但是在这种情况下，您甚至不需要额外的 data 变量）。

由于vuejs v2.3.0, it is suggested to emit value to the parent，所以父组件更改它，然后将其传递给子组件。

所以你所要做的就是：

在v-dialog组件

删除v-model并替换为:value="value" @input="$emit('input')"

你的函数：

closeDialog() {
    this.$emit('input');
}

在 panel-desconectar-modal 组件中使用 v-model="showDesconectar".

这会起作用 because：

<input v-model="something"> is syntactic sugar for:

<input   
    v-bind:value="something"
    v-on:input="something = $event.target.value">

这里是working example pen which I provided in an answer to similar question.

Answer 3

这真是问问自己的时刻"Do I really need a prop? Can I do this with data? Am I here because I mistakenly put some state in Vue component?"

如果您是页面和组件的作者，并且组件只在页面上出现一次，那么没有充分的理由使用道具。如果您需要props 因为组件对数组中的所有行重复，使 prop 只是数组索引，所以组件可以直接修改存储中的源数组。 Vue 组件不应包含状态，尤其是需要共享的状态，并且不喜欢彼此紧密绑定。 parent-child 关系源于它们在 DOM 树中的放置机会，（children 出现在 parents 的标记内）。这就像夜店里的偶遇。 child 可能与 parent 没有任何关系。您的源数据的层次结构应该在您的商店结构中独立于您的标记来表达。在可能的情况下，您的 Vue 组件应该与商店有密切的双向关系，并且 彼此之间不要过多交谈 :-)

Answer 4

在 relevant Vue doc 中他们没有默认值的例子，所以这些答案可以在别处找到。我需要一个解决方案来创建一个具有默认值的组件，但输入总是 spring 回到失去焦点之前的状态，或者给出 "avoid mutating a prop directly" 错误。创建一个可变属性并在 created 事件中设置它的值为我解决了这个问题：

data()
{
    return {
        text: null
    };
},

props: {
    properties: Object,
    value: String
},

created()
{
    this.text = this.value;
}

VueJS 错误避免直接改变道具

VueJS error Avoid mutating a prop directly

vue.js

vuejs2

vuetify.js