如何使用 Vuetify 在 Vue 中发出选中的值

Question

如何以正确的方式将“检查”值从孩子发送给父母？

我的复选框是一个使用v-checkboxVuetify的嵌套组件。我想将checked值发送给他的父母。现在，我正在做那个发射$event并且有效，因为$emit包含该true/false值但我不知道为什么（我认为我需要发射，$event.target.checked但这是undefined）。

Checkbox.vue

<template>
  <v-checkbox color="primaryGreen" hide-details @change="$emit('change', $event)">
    <span slot="label" class="checkbox-label">
      <slot></slot>
    </span>
  </v-checkbox>
</template>

Form.vue (parent)

<v-layout id="different-address-checkbox">
  <v-flex>
   <checkbox @change="sth">
    <span>Different Address</span>
   </checkbox>
  </v-flex>
</v-layout>

export default {
  data() {
    return {
      differentAddress: false
    };
  },
  methods: {
    sth(value) {
      this.differentAddress = value;
    }
  }
};

我不明白为什么$emit包含true/false而不是整个事件，event.target.checked我不确定将checked值从子级发送到父级的正确方法是什么。

Answer 1

v-checkbox不是原生表单元素。它发出 Vuetify 框架的作者决定它发出的任何内容。在这种情况下，一个布尔值。

您是正确的，在使用表单元素时，您通常需要使用$event.target.checked或访问值$event.target.value，但这不适用于自定义组件。

这是 Vuetify源代码中的相关部分：

internalValue: {
    get () {
      return this.lazyValue
    },
    set (val) {
      this.lazyValue = val
      this.$emit(this.$_modelEvent, val)
    }
},

当组件的值发生变化时，internalValue会推送到父组件（您的子组件）。