如何在与表单无关的元素上使用 v-model？答案

【问题标题】：How do I use v-model on none form-related elements?如何在与表单无关的元素上使用 v-model？
【发布时间】：2019-10-05 21:43:40
【问题描述】：

首先，我在my-component 中使用Vuetify 的VSwitch 组件。我想将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 的值返回给正在使用它的父级。我已经浏览了一段时间的网络，但我只看到了输入。但是像 VTreeview 这样的 Vuetify 的一些组件是可能的，所以我想也许是可能的。

【问题讨论】：

标签： vue.js vue-component vuetify.js v-model

【解决方案1】：

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

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

（默认情况下）等价于：

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

任何组件都可以支持v-model，只需拥有value 属性并发出input 事件即可。可以使用model 选项更改道具和事件的名称，请参阅https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model

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

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

【讨论】：

【解决方案2】：

父组件用childToParent监听子组件的变化，如果有变化我调用childChanged ()方法

// Parent Component

<template>
  <div id="parent">
    <p>{{parentToggledData}}</p>
    <Child v-on:childToParent="childChanged"/>
  </div>
</template>

<script>
import Child from "./Child";
export default {
  name: "parent",
  components: {
    Child
  },
  data() {
    return {
      parentToggledData: []
    };
  },
  methods: {
    childChanged(value) {
      this.parentToggledData = value;
    }
  }
};
</script>

我监听每个v-switch的变化，如果有，我在这个方法中调用emitToParent ()方法，我用$emit将变化发送给父级，它把监听的事件作为参数父 childToParent 和“要发送的值 this.toggledData

// Child Component

<template>
  <div id="child">
    <v-switch v-model="toggledData" value="John" @change="emitToParent"></v-switch>
    <v-switch v-model="toggledData" value="Andrew" @change="emitToParent"></v-switch>
    <v-switch v-model="toggledData" value="Melissa" @change="emitToParent"></v-switch>
    <v-switch v-model="toggledData" value="Elizabeth" @change="emitToParent"></v-switch>
  </div>
</template>

<script>
export default {
  name: "child",
  data() {
    return {
      toggledData: []
    };
  },
  methods: {
    emitToParent(event) {
      console.log(event)
      console.log(this.toggledData)
      this.$emit("childToParent", this.toggledData);
    }
  }
};
</script>

【讨论】：

【解决方案3】：

你可以这样做： <v-switch @change="$emit('swithValue', value)" value="John"></v-switch> 然后在你的父组件中只听swithcValue 就像@switchValue="myFunction" 你的函数隐式地获取发出的值，你可以随心所欲地使用它。

【讨论】：