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

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>

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

避免直接改变 prop，因为只要父组件重新渲染，该值就会被覆盖。相反，根据 prop 的值使用数据或计算属性。道具被变异：“value”

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

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

Answer 1

由于 Vue 在 mutate 时会抛出警告props，因此不应使用v-modelwith props。要处理此问题，请使用以下模式：

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

使用 getter定义computed属性，返回props.value，并使用 setter 发出input事件（将在父级中成功处理，因为您使用v-model）

不要忘记改变你的template： <v-dialog v-model="propModel" max-width="500px">