我的自定义 slider 插件中有这两个组件,组件 1 将作为包装器,组件 2 将传递给组件 1强>插槽:
comp1.vue
:
<template>
<div id="sliderwrapper">
<slot></slot>
</div>
</template>
comp2.vue
:
<template>
<div class="slider">
<slot></slot>
</div>
</template>
现在,在我的 Vue 应用程序中,我可以
<sliderwrapper>
<sliderbox @click="slideritem(item.title)" v-for="(item,index) in slideritems" :key="index">
<p>{{ item.title }}</p>
</sliderbox>
</sliderwrapper>
import sliderwrapper from './comp1.vue';
import sliderbox from './comp2.vue';
export default{
components : [ sliderwrapper, sliderbox ],
data() {
return {
slideritems : [
{ title : 'title 1' },
{ title : 'title 2' },
{ title : 'title 3' },
]
}
},
methods : {
slideritem(title){
alert(title);
}
}
}
不幸的是组件 2 上的点击事件 <sliderbox>
既不工作也不触发,没有附加事件之类的东西。
有什么想法吗?
最佳答案
在组件上使用@click
只会监听该组件使用$emit
显式发出的click
事件。它不会监听 DOM 事件。
要监听 native 事件,您需要改用 @click.native
。
参见:
https://v2.vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components
关于vue.js - 传递给插槽的 vue 组件上的单击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57504158/