vue.js 组件中的自定义事件答案

【问题标题】：Custom events in vue.js componentsvue.js 组件中的自定义事件
【发布时间】：2019-03-21 00:35:08
【问题描述】：

场景

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

我的方法是基于取自官方文档的描述 (https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model)。

问题

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

代码

下面的 sn-p 说明了复选框组件。

<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>

我怎样才能实现选中的复选框被更新？

【问题讨论】：

这通常发生在它们具有相同的name 和v-model 属性时。你让这些独一无二吗？
组件本身被称为CheckboxPart。绑定到v-model 的变量在两个父组件中被称为不同。这能回答你的问题吗？
我们能看到那个自定义组件的代码吗？
当然。我刚刚更新了我的帖子并添加了一个 sn-p。
名称将始终相同。我们可以看看你是如何将checked 传递到复选框的吗？

标签： vue.js vuejs2 vue-component

【解决方案1】：

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

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

【讨论】：

谢谢！在检查了我的实现和@Ohgodwhy 的提示后，我动态设置了id 和name 以及标签for 属性的值。所以会在父组件的模板中传入。

【解决方案2】：

正如 cmets 中已经提到的，问题是由 CheckboxPart 组件内的 id 和 name 的硬编码值引起的。

我为name 和value 添加了两个属性，并将它们也注入到组件中。

sn-p

<!-- checkbox -->

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

<script>
  export default {
    model: {
      prop: 'checked',
      event: 'change'
    },
    props: {
      checked: {
        type: Boolean,
      },
      name: {
        type: String,
        required: true
      },
      id: {
        type: String,
        required: true
      }
    }
  }
</script>

<!--- parent component using the one -->

<template>
  <!-- removed for brevity -->
  <!-- ... -->
 <div class="expandable-category-part-social-section">
        <checkbox-part
          v-model="isSocialIntegrationEnabled"
          :id="title + 'social-media'"
          :name="title + 'social-media'"
        >
          <template slot="label">
            <div class="checkbox-part-label-text">Final text comes here...</div>
          </template>
</checkbox-part>
</div>

<!-- ... -->

</template>

【讨论】：