[英]Vue3 - pass multiple event listeners along with their handlers to child component
in Vue3 I can do the following:在 Vue3 中,我可以执行以下操作:
Parent Component:父组件:
<ChildComponent :props="{ id: 'the-id', class: 'the-class' }" />
ChildComponent:子组件:
<template>
<input v-bind="props" />
</template>
<script>
export default {
props: {
props: { type: Object }
}
}
</script>
This will result in HTML like this:这将导致 HTML 如下所示:
<input id="the-id" class="the-class" />
I'm still learning Vue and I was wondering if I could do the same thing with event listeners / handlers.我还在学习 Vue,我想知道是否可以对事件侦听器/处理程序做同样的事情。
With reusable components I might need different event listeners / handlers, depending on where I use the component.对于可重用组件,我可能需要不同的事件侦听器/处理程序,具体取决于我使用组件的位置。 In one form I might need only an @input="..."
in the child component, in another form I might also need an @blur="..."
or I might not need an event listener at all.在一种形式中,我可能只需要子组件中的@input="..."
,在另一种形式中,我可能还需要@blur="..."
或者我可能根本不需要事件侦听器。
Is it possible to do something similar to this?有可能做类似的事情吗?
ParentComponent:父组件:
<ChildComponent :events="{ input: function() { alert('input!'); }, blur: function() { alert('blur!'); } } />
ChildComponent:子组件:
<template>
<input @events />
</template>
<script>
export default {
props: {
props: { type: Object }
}
}
</script>
Thank you ;)谢谢 ;)
You can also do something similar like you did with the props, by passing an object to v-on
:您也可以通过将对象传递给v-on
来执行与 props 类似的操作:
<input v-on="{ input: doThis, blur: doThat }"></button>
See here: https://v3.vuejs.org/api/directives.html#v-on见这里: https ://v3.vuejs.org/api/directives.html#v-on
The root element of a component automatically inherits all non-prop attributes (including event listeners) applied to the component from the parent.组件的根元素会自动继承父组件应用到组件的所有非属性属性(包括事件监听器)。 So if <input>
were really at the root in ChildComponent
, you wouldn't need to declare anything, and you could simply apply attributes to ChildComponent
as if it were the input
itself:因此,如果<input>
确实位于ChildComponent
的根目录,则不需要声明任何内容,并且可以简单地将属性应用于ChildComponent
,就好像它是input
本身一样:
<ChildComponent id="the-id" class="the-class" @blur="onBlur" />
However, this will break as soon as you add another element to ChildComponent
because <input>
would no longer be the root.但是,一旦您向ChildComponent
添加另一个元素,这就会中断,因为<input>
将不再是根。 It also would be a problem if you wanted to switch the root element (eg, a <label>
that wraps the <input>
).如果您想切换根元素(例如,包装<input>
的<label>
),这也是一个问题。
To disable automatic attribute inheritance , allowing control of where to apply the inherited attributes, set inheritAttrs: false
in component options.要禁用自动属性继承,允许控制应用继承属性的位置,请在组件选项中设置inheritAttrs: false
。 (This doesn't need to be disabled when there are multiple root nodes, as it only applies for single-root components.) Then manually v-bind
the $attrs
prop to any element within: (当有多个根节点时不需要禁用此功能,因为它仅适用于单根组件。)然后手动将$attrs
v-bind
到其中的任何元素:
<template>
<label>My input: <input v-bind="$attrs"></label>
</template>
<script>
export default {
inheritAttrs: false,
}
</script>
My recommendation would be to define the different events though Vue's Custom Events;我的建议是通过 Vue 的自定义事件定义不同的事件; The custom events would allow the users of the component to choose which event to subscribe to and handle it accordingly.自定义事件将允许组件的用户选择订阅哪个事件并相应地处理它。
https://v2.vuejs.org/v2/guide/components-custom-events.html https://v2.vuejs.org/v2/guide/components-custom-events.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.