vue.js - 传递给插槽的 vue 组件上的单击事件
问题描述
我的自定义滑块插件中有这两个组件,组件 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
只会监听click
该组件使用$emit
. 它不会监听 DOM 事件。
要侦听您需要使用的本机事件@click.native
。
看:
https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components
推荐阅读
- google-cloud-platform - 根据谷歌云存储中的存储类别获取存储桶的大小
- html - 将标签转换为日期选择器
- reactjs - 当子组件发生任何变化时如何重新渲染父组件?
- excel - 仅使用宏重命名某些工作表
- python - 是否可以在仍然修改它的同时返回一个值?
- c# - 打开扩展名大写的文件时找不到 Pdftron 消息头(DOCX)
- azure - 为什么我没有使用虚拟机,但剩余的信用额度却在减少?
- c# - C# - 无法将转换 lambda 表达式转换为 listitem
- python - Python .exe 无法找到该文件,但 .py 正在按预期工作
- android - 为什么我的按钮没有显示在布局中?