Vue.js.切换子组件模式 [英] Vue JS. Toggle child component modal

问题描述

父组件:

<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 的这种解决方法.

This code works but I really don't like this workaround with watch.

问题:

1. 如果v-model="toggledialog" 不监视props:['dialog']，如何在子组件中打开对话框?
2. 当我在子组件 v-model="dialog" 中更改父组件时，如何将父组件中的 dialog 更改为 false 如果在Vue JS 不允许修改 props?

1. How to open dialog in child component when v-model="toggledialog" if it doesn't watch for props:['dialog']?
2. How to change dialog to false in parent component when I i change it in child component v-model="dialog" if in Vue JS it is not allowed to change props?

推荐答案

将 value prop as value 传递给 v-dialog，然后重新-emit input v-dialog 每当你想关闭它:

Pass value prop as value to v-dialog, and re-emit input v-dialog whenever you want to close it:

//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 添加到您的父级

and add v-model to your parent

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

所以没有data和watch

示例

这篇关于Vue.js.切换子组件模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！