我有一个Vue.js组件,如下所示:
<!-- MyComponent.vue -->
<script>
export default {
render: () {
return;
},
methods: {
foo() {
alert('hi');
},
},
};
</script>
然后我的HTML看起来像这样:
<my-component @click="foo" />
当我运行时,我收到一个错误:
Property or method "foo" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
我似乎无法理解我在这里做错了什么 - 关于这个错误的所有其他SO问题似乎都是由范围问题引起的,但我只是处理一个简单的组件。
答案 0 :(得分:2)
foo
在组件中定义 my-component
,而不是my-component
本身。
此外,您需要@click.native
,除非您在$emit
中明确click
名为my-component
的事件。
如果您在html元素上使用此组件内的@click="foo"
,它将按预期工作(组件上的@click
需要.native
)。