VueJS 从子级更改 v-model 变量

Posted 2023-02-23

【中文标题】VueJS 从子级更改 v-model 变量

【英文标题】：VueJS change v-model variable from child

【发布时间】：2018-08-24 21:52:15

【问题描述】：

我正在尝试通过父组件更改组件的v-model，但我没有得到。

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

ProgressModal.vue

<template>
    <v-dialog v-model="show" persistent max->
        <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-dialog 中代替v-model 但它不起作用:(

【问题讨论】：

如果父组件中存在showProgress，那么您不能使用v-model（除非您进行了一些相当高级的更改）。相反，您需要使用prop 和$emit 将任何更改返回给父级。

【参考方案1】：

将value prop 作为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

【讨论】：

不错！与公认的解决方案相比，这也适用于非持久性对话框。

这应该是首选的解决方案。

【参考方案2】：

要让父级使用v-model，您必须在子级中定义一个value 属性并使用它。

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

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

这样，当你使用时：

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

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

将其命名为show

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

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

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

【讨论】：

这不会改变 prop （即你得到错误 wrt mutating prop）吗？我没有使用最新的 vue 版本进行测试，但我认为 vuejs2 的做法是向父级发出值？

@Traxo 如果对话框是输入或其他东西，它会。事情是<dialog>不会改变value，所以没问题。

@acdcjunior 啊，你是对的，我没有注意到persistent 选项。没有它v-dialog 应该在点击外部时更改value，所以我认为你的示例在这种情况下无法正常工作。

这行得通；然而，这会给你一个“[Vue 警告]：避免直接改变一个道具”-message :-(