时间戳

首页 > 解决方案 > 如何在与表单无关的元素上使用 v-model？

vue.js - 如何在与表单无关的元素上使用 v-model？

问题描述

首先，我在内部使用 Vuetify 的VSwitch组件my-component。我想将值返回my-component给父级。

就像是<my-component v-model="returnedData"></my-component>

然后是内<my-component></my-component>

<template>
  <div>
    <v-switch v-model="toggledData" value="John"></v-switch>
    <v-switch v-model="toggledData" value="Andrew"></v-switch>
    <v-switch v-model="toggledData" value="Melissa"></v-switch>
    <v-switch v-model="toggledData" value="Elizabeth"></v-switch>
  </div>
</template>

<script>
export default {
  props: ['value'],
  data () {
    return {
      toggledData: []
    }
  }
}
</script>

如果可能，我想将 的值返回toggledData给使用它的父级。我已经浏览了一段时间的网络，但我只看到了输入。但是像 Vuetify 的一些组件是可能的，VTreeview所以我想也许是可能的。

标签： vue.jsvue-componentvuetify.jsv-model

解决方案

在您的示例中使用v-modellike ：

<my-component v-model="returnedData"></my-component>

（默认情况下）等价于：

<my-component :value="returnedData" @input="returnedData = $event"></my-component>

任何组件都可以v-model通过拥有一个valueprop 并发出一个input事件来支持。可以使用该model选项更改道具和事件的名称，请参阅https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model

所有这些都假设您需要双向数据绑定。在您的问题中，您似乎暗示您只想将数据传递给父级，这只是一种方式。为此，您只需要发出一个事件并使用@侦听器侦听该事件。

在这种情况下，真正创建双向数据绑定会很棘手。最简单的方法是放下v-model并v-switch分别使用道具和事件。还有其他选择，例如使用v-model具有 getter 和 setter 的计算属性，但我不相信这会使事情变得更清晰。

推荐阅读