如何为插槽（Vue.js）中的元素添加事件监听器？答案

【问题标题】：How to add event listeners for elements in slots (Vue.js)?如何为插槽（Vue.js）中的元素添加事件监听器？
【发布时间】：2021-03-02 12:05:34
【问题描述】：

我想做一个“characters-counter”vue组件，可以统计输入元素的字符数，像这样：

<characters-counter v-slot="{charactersCount}">
    <div>{{ charactersCount }} Chars</div>
    <input type="text">
    <textarea></textarea>
    <input type="text">
</characters-counter>

我知道我可以这样做：

<template>
    <div @keyup="changeCharactersCount" class="container">
        <slot :item="charactersCount"></slot>
    </div>
</template>

但我不想在那里添加额外的“容器”元素。所以有人知道没有“容器”元素我怎么能达到同样的目的？也就是说，如何在槽内为元素本身添加事件监听器？

【问题讨论】：

标签： vue.js vuejs3

【解决方案1】：

为什么不将您的<input /> 绑定到v-model？

然后你想在哪里获得计数只需调用一个计算来获得计数......所以你最终会得到这样的结果：

<characters-counter v-slot="{charactersCount}">
    <div>{{ getCharacterCount }} Chars</div>
    <input v-model="myInput" type="text">
</characters-counter>

然后你的data() 和computed：

data: (() => {
   myInput: '',
}),
computed: {
  getCharacterCount() {
    return this.myInput.length;
  }
}

【讨论】：

谢谢，但我不想打扰组件内的输入元素。我想要一个可以尽可能简单地使用的组件，它是组件的责任绑定其子输入元素的事件。

【解决方案2】：

或者，您可以将事件侦听器从自定义组件传递到其插槽内容作为插槽道具（就像您已经在使用 characterCount 一样）：

<template>
  <label for="mySlot">My Custom Input</label>
  <slot id="mySlot"
    :characterCount="characterCount"
    :onCountCharacters="onCountCharacters">
  </slot>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const characterCount = ref(0)
    return {
      characterCount,
      onCountCharacters: e => characterCount.value = e.target.value.length
    };
  },
};
</script>

然后消费者将在其input 上使用事件监听器：

<template>
  <characters-counter v-slot='{ characterCount, onCountCharacters }'>
    <input @keyup='onCountCharacters' placeholder='My Custom Input'>
    <span>{{ characterCount }}</span>
  </characters-counter>
</template>

demo

【讨论】：

谢谢，但我不想打扰组件内的输入元素。我想要一个可以尽可能简单地使用的组件，它是组件的责任绑定其子输入元素的事件。