Vue.js Vue 2-从具有参数的组件发出事件

我试图从我的组件发出带有相应参数的事件，但找不到发送参数的方法

以下是迄今为止的代码：

HTML:

全部|
可见|
隐藏的

Vue代码：

Vue.component('visible-filter', {
    template: `
        <span class="text-muted"
            @mouseenter="changeClassMouseenter($event)"
            @mouseout="changeClassMouseout($event)"
            @click="countryTest(param)"
        ><slot></slot></span>
    `,

    methods: {

        changeClassMouseenter(event) {
            event.target.classList.remove('text-muted')
        },

        changeClassMouseout(event) {
            event.target.classList.add('text-muted')
        },

        countryTest(param) {
            Event.$emit('countryFilter', param);
        }
    }

});

Vue.component（'visible-filter'{
模板：`
`,
方法：{
changeClassMouseenter（事件）{
event.target.classList.remove（'text-muted'）
},
ChangeClassMousOut（事件）{
event.target.classList.add（'text-mute'）
},
countryTest（参数）{
事件。$emit（'countryFilter'，参数）；
}
}
});

我正在观看比赛，但我没有进入比赛。

---

我做错了什么？

你真的抓住了这个事件？你是说你在发射它吗？事件处理程序正在将处理程序设置为字符串。另外，您通常不能在模板中使用camelCased事件。将调试器放入

countryTest

方法中，

param

包含什么值？@BertEvans-event被激发，但没有传递任何内容（我仍然可以捕获事件目标）@phoet-我对参数没有定义。那么

param

应该从哪里来？为什么你希望它是其他东西？

Vue.component('visible-filter', {
    template: `
        <span class="text-muted"
            @mouseenter="changeClassMouseenter($event)"
            @mouseout="changeClassMouseout($event)"
            @click="countryTest(param)"
        ><slot></slot></span>
    `,

    methods: {

        changeClassMouseenter(event) {
            event.target.classList.remove('text-muted')
        },

        changeClassMouseout(event) {
            event.target.classList.add('text-muted')
        },

        countryTest(param) {
            Event.$emit('countryFilter', param);
        }
    }

});