Vue JS。切换子组件模式答案

【问题标题】：Vue JS. Toggle child component modalVue JS。切换子组件模式
【发布时间】：2018-07-07 12:14:12
【问题描述】：

父组件：

<template>
    <v-btn v-on:click="dialog = !dialog">
    </v-btn>
</template
<script>
    export default {
        data: () => ({
           dialog: false
        }
</script

子组件：

<template>
    <v-layout>
        <v-dialog v-model="toggledialog">
            <v-btn color="green darken-1" flat="flat" 
            @click.native="toggledialog = false">Close</v-btn>
        </v-dialog>
    </v-layout>
</template>
<script>
    export default {
        data: () => ({
            toggledialog: false,
        }),
        watch: {
            dialog: function(){
                this.toggledialog = true
            },
        },
        props:['dialog']
}
</script>

此代码有效，但我真的不喜欢 watch 的这种解决方法。

问题：

如果v-model="toggledialog" 不关注props:['dialog']，如何在子组件中打开对话框？
如果在Vue JS中不允许更改props，我在子组件v-model="dialog"中更改父组件时如何将dialog更改为false？

【问题讨论】：

docs 似乎没有在单独的组件中使用v-dialog 的例子，但是这个问题Open a Vuetify dialog from a component template in VueJS 有两种方法。
使用 Vue 全局事件总线？
Open a Vuetify dialog from a component template in VueJS的可能重复

标签： javascript vue.js vuetify.js

【解决方案1】：

将value 属性作为value 传递给v-dialog，并在您想要关闭它时重新发出输入v-dialog：

//CustomDialog.vue
<v-dialog :value="value" @input="$emit('input')">
    <v-btn color="green darken-1" flat="flat" 
        @click.native="$emit('input')"
    >Close</v-btn>
</v-dialog>
...
props:['value']

并将 v-model 添加到您的父级

//Parent.vue
<custom-dialog v-model="dialog">

所以没有data 也没有watch

example

【讨论】：