Question

我的自定义滑块插件有这两个组件，组件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事件无法正常工作或无法触发，未附加诸如event之类的事件。

有什么想法吗？

Answer 1

在组件上使用@click将仅侦听该组件使用click显式发出的$emit事件。它不会监听DOM事件。

要监听本地事件，您需要改用@click.native。

请参阅：

https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components

Answer 2

v-on:click.native="slideritem(item.title)"

应该这样做。

向下传递到广告位的vue组件上的Click事件

2 个答案: