javascript - Vue3 - 将多个事件监听器及其处理程序传递给子组件

Question

在 Vue3 中，我可以执行以下操作:

父组件:

<ChildComponent :props="{ id: 'the-id', class: 'the-class' }" />

子组件:

<template>
    <input v-bind="props" />
</template>

<script>
export default {
    props: {
        props: { type: Object }
    }
}
</script>

这将导致这样的 HTML:

<input id="the-id" class="the-class" />

我仍在学习 Vue，我想知道我是否可以用事件监听器/处理程序做同样的事情。

对于可重用组件，我可能需要不同的事件监听器/处理程序，具体取决于我使用该组件的位置。在一种形式中，我可能只需要子组件中的 @input="..."，在另一种形式中，我可能还需要一个 @blur="..." 或者我可能根本不需要事件监听器。

是否可以做类似的事情？

父组件:

<ChildComponent :events="{ input: function() { alert('input!'); }, blur: function() { alert('blur!'); } } />

子组件:

<template>
    <input @events />
</template>

<script>
export default {
    props: {
        props: { type: Object }
    }
}
</script>

谢谢;)

Answer 1

组件的根元素automatically inherits all non-prop attributes (包括事件监听器)从父级应用到组件。所以如果<input>确实是 ChildComponent 的根源, 你不需要声明任何东西，你可以简单地将属性应用于 ChildComponent就好像它是 input本身:

<ChildComponent id="the-id" class="the-class" @blur="onBlur" />

demo 1

但是，一旦您向 ChildComponent 添加另一个元素，这就会中断因为<input>将不再是根。如果您想切换根元素(例如，包装 <label> 的 <input>)，这也会是一个问题。

收件人disable automatic attribute inheritance ，允许控制在何处应用继承的属性，设置 inheritAttrs: false在组件选项中。 (当有多个根节点时不需要关闭，因为它只适用于单根组件。) 然后手动 v-bind $attrs prop到任何元素:

<template>
  <label>My input: <input v-bind="$attrs"></label>
</template>

<script>
export default {
  inheritAttrs: false,
}
</script>

demo 2