javascript - 创建对话框组件并向父级显示/隐藏

Question

在 Vue/Vuetify 中，我们如何向父级隐藏/显示对话框？我正在尝试使用 v-model，这是我的设置的简化版本:

父组件(只是触发子组件显示的按钮)

<template>
<div>
    <v-btn class="ma-2" outlined fab color="red" small @click.stop="editItem()">
        <v-icon size="16">mdi-close-circle</v-icon>
    </v-btn>
    <user-dialog v-model="dialog" :eitem="editedItem" class="elevation-2" />
</div>
</template>

<script>
import UserDialog from "./UserDialog.vue";
export default {
    components:{
        UserDialog
    },
    data() {
        return {
            counter: 0,
            dialog: false,
            editedItem: {},
        }
    },
    methods: {
        editItem: function() {            
            this.counter++;       
            this.editedItem = Object.assign({}, {
                title: 'some title' + this.counter,
                details: 'some details for this item'
            });        

            this.dialog = true;
        },
    },
}
</script>

子组件(基本上是一个对话框)

<template>
    <v-dialog v-model="value" max-width="500px">
        <v-card>
            <v-card-title>
                <span class="headline">A Dialog</span>
            </v-card-title>

            <v-card-text>
                <v-container grid-list-md>
                    <v-layout wrap>
                        <v-flex xs12>
                            <v-text-field v-model="eitem.title" label="Title"></v-text-field>
                        </v-flex>
                        <v-flex xs12>
                            <v-text-field v-model="eitem.details" label="Details"></v-text-field>
                        </v-flex>
                    </v-layout>
                </v-container>
            </v-card-text>

            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="blue darken-1" text @click.stop="save">Save</v-btn>
                <v-btn color="blue darken-1" text @click.stop="close">Cancel</v-btn>
            </v-card-actions> 
        </v-card>
    </v-dialog>
</template>

<script>
    export default {
        props: {
            value: Boolean, 
            eitem: Object,
        },
        data() {
            return {
                editedItem: this.eitem,
            }
        },
        methods: {
            save() {
                //perform save
                this.$emit('input', false);
            },
            close() {
                this.$emit('input', false);
            },
        },
    }
</script>

此设置有效，但会发出以下警告:

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"

但是，如果按照此建议操作并在子组件中声明一个 data 项，并将 v-dialog 的 v-model 设置为此数据项，单击后对话框将停止显示。

我也许理解它为什么这样做，但无法找出解决此问题且不显示警告的正确方法。谁能帮我解决这个问题吗？

Answer 1

因为当你变异时 Vue 会抛出警告 props ，您不应该使用 v-model与 props 。要处理此问题，请使用以下模式:

computed: {
  propModel: {
    get () { return this.value },
    set (value) { this.$emit('input', value) },
  },
},

定义computed带有 getter 的属性，返回 props.value ，以及发出 input 的 setter事件(将在父级中成功处理，因为您使用 v-model )

别忘了充值您的 template : <v-dialog v-model="propModel" max-width="500px">