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

发生这种情况是因为您的 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">

这是我在answer 到similar question 中提供的working example pen。

Answer 2

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

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

现在，您可以更改childValue：

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

确保在子组件中的任何地方都使用childValue，而不是value props。

Answer 3

这真的是问自己的时刻“我真的需要一个道具吗？我可以用数据做这个吗？我在这里是因为我错误地在 Vue 组件中放置了一些状态吗？”

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

Answer 4

在relevant Vue doc 中没有默认值的示例，因此这些答案可以在其他地方找到。我需要一个解决方案来创建一个具有默认值的组件，但是当它失去焦点时，输入总是会弹回到它之前的状态，或者它给出了“避免直接改变一个道具”错误。创建一个可变属性并在created 事件中设置它的值为我解决了这个问题：

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

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

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