时间戳

首页 > 解决方案 > vue.js 组件中的自定义事件

vue.js - vue.js 组件中的自定义事件

问题描述

场景

因为我有一个更复杂的复选框，所以我将它封装在一个单独的组件中。在父组件的模板中，我更喜欢使用v-model将值绑定到变量。

我的方法是基于从官方文档中获取的这个描述（ https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model ）。

问题

当我有两个custom-checkbox- 元素并选择最后一个时，将选择 DOM 中的第一个。看来，第一个正在消费该事件。

编码

以下代码片段说明了复选框组件。

<template>
  <div class="checkbox-part">
    <input class="checkbox-part-input" type="checkbox" name="cb" id="cb"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
    <label class="checkbox-part-label" for="cb"
      :class="{ 'checkbox-part-label--checked': checked }"
    >
    <slot name="label"></slot>
    </label>
    <!-- removed for brevetiy -->
  </div>
</template>

<script>
export default {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: {
      type: Boolean,
    }
  }
}
</script>

我怎样才能实现，选定的复选框已更新？

标签： vue.jsvuejs2vue-component

解决方案

您在组件中有硬编码的输入名称。因此，您可能会渲染两个具有相同名称的输入（在本例中为“cb”），我认为您可以将输入名称和 id 作为道具传递。

这应该可以解决您的问题。

推荐阅读