制作Vue自定义复选框组件的正确方法

Question

如何在Vue中创建自定义复选框。当复选框改变时，它应该调用函数。 我得到了错误“无法读取未定义的属性'id'” 和警告“在执行本机事件处理程序期间出现未处理的错误”

自定义复选框：

<template>
  <div class="filter">
    <input
        :ref="id"
        :id="id"
        type="checkbox"
        class="filter-checkbox"
        @change="$emit('do', $emit)"
    />
    <span>{{ label }}</span>
  </div>
</template>

<script>
export default {
  name: "Checkbox",
  props: {
    label: {
      type: String
    },
    isSelected: {
      type: Boolean
    },
    id: {
      type: String
    }
  },
}
</script>

我想在父组件中使用它：

<Checkbox
   v-for="filter of filters"
   :key="filter.id"
   :label="filter.name"
   :id="filter.id"
   v-model="filter.selected"
   @do="mutuallyExclusive(filter.id)"
/>

Answer 1

无法重复出现未定义和未处理的错误，您需要进一步调试。

但是您正在发出emit函数，这很奇怪，而且无论是否选中，值始终为filter.id。

您可能想要做一些类似以下的操作：

new Vue({
  el: '#app',
  components: {
    'Checkbox': {
      template: '#checkbox-template',
      props: {
        label: {
          type: String,
          default: ''
        },
        value: {
          type: Boolean,
          default: false
        },
        id: {
          type: String,
          default: ''
        }
      }
    }
  },
  data: () => ({
    filters: [{
      id: 1,
      name: 'a',
      selected: true,
    },{
      id: 2,
      name: 'b',
      selected: false,
    }]
  }),
  methods: {
    mutuallyExclusive(value) {
      console.log(value)
    }
  }
})

<div id="app">
  <Checkbox 
    v-for="filter of filters" 
    :key="filter.id" 
    :label="filter.name" 
    :id="filter.id" 
    v-model="filter.selected" 
    @change="mutuallyExclusive" 
  />
</div>

<template id="checkbox-template">
  <div class="filter">
    <input 
      :ref="id" 
      :id="id" 
      type="checkbox" 
      class="filter-checkbox"
      :checked="value"
      @change="$emit('change', {value:$event.target.checked, id})" 
    />
    <span v-if="label">{{ label }}</span>
  </div>
</template>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.14/vue.min.js"></script>