如何在 none form-related 元素上使用 v-model？

Question

首先，我在 my-component 中使用 Vuetify 的 VSwitch 组件。我想把return的值my-component改成parent.

类似于<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>

我想 return toggledData 的值到正在使用它的 parent 如果可能的话。我已经浏览了一段时间的网络，但我只看到了输入。但是 Vuetify 的一些组件是可能的，比如 VTreeview 所以我在想也许这是可能的。

Answer 1

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

Answer 2

像你的例子一样使用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

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

真正创建 two-way 数据绑定在这种情况下会很棘手。最简单的方法是将 v-model 放在 v-switch 上，然后分别使用道具和事件。有替代方案，例如将 v-model 与具有 getter 和 setter 的计算属性一起使用，但我不相信这会使事情变得更清楚。

Answer 3

父组件用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>

如何在 none form-related 元素上使用 v-model？

How do I use v-model on none form-related elements?

vue.js

vue-component

vuetify.js

v-model