vue.js - VueJS 更改子级的 v-model 变量

Question

我正在尝试更改 v-model我没有得到父组件的组件的大部分信息。

在父组件中我有一个 showProgress变量，当我将其更改为 true 时我想要它 child v-model <progress-modal>切换到true .

ProgressModal.vue

<template>
    <v-dialog v-model="show" persistent max-width="400">
        <v-card :dark="($theme === 'dark')">
            <v-card-title class="headline" v-text="title"></v-card-title>
            <v-divider></v-divider>
            <div class="text-xs-center mt-2">
                <v-progress-circular indeterminate :size="100" :color="$color"></v-progress-circular>
                <v-card-text v-text="text"></v-card-text>
            </div>
        </v-card>
    </v-dialog>
</template>

<script>
    export default {
        name: 'progress-modal',
        props: ['title', 'text'],
        data: () => ({
            show: true
        }),
        methods: {

        }
    }
</script>

我已经尝试过使用

<progress-modal v-model="showProgress">

而不是 v-model在v-dialog但它不起作用:(

Answer 1

将 value 属性作为 value 传递给 v-dialog 组件，并从 v-dialog 重新发出输入> 组件:

//CustomDialog.vue
<v-dialog :value="value" @input="$emit('input', $event)">

</v-dialog>
...
props:['value']

并将 v-model 添加到您的父级(自定义对话框)

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

Example