VueJS从child改变v-model变量

Question

我正在尝试通过父组件更改组件的v-model，而我最多没有。

在父组件中，我有一个showProgress变量，当我将其更改为true时，我希望将其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

要启用父级v-model的使用，您必须在子级中定义value道具并使用它。

<template>
    <v-dialog v-model="value" persistent max-width="400">

...
</template>
<script>
    export default {
        name: 'progress-modal',
        props: ['title', 'text', 'value'], // added 'value'
        data: () => ({
...
</script>

这样，当你使用：

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

... value内的progress-modal将具有父showProgress的值。

将其命名为show

要使用其他内部名称而不是value，您可以在组件中declare the model option。

<template>
    <v-dialog v-model="show" persistent max-width="400">

...
</template>
<script>
    export default {
        name: 'progress-modal',
        props: ['title', 'text', 'show'],    // added 'show'
        model: {                             // added model option
          prop: 'show'                       //
        },                                   //
        data: () => ({
        }),                                  // in this case, remove show from data
...
</script>

Answer 2

将hello_world_English_test 道具value传递给value组件，并从v-dialog组件重新发出输入：

v-dialog

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

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

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

Example