vue.js - VueJS从子更改v模型变量

我正在尝试通过我没有得到的父组件来更改组件的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，但它不起作用:(

最佳答案

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

<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>

关于vue.js - VueJS从子更改v模型变量，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49310417/