Vue组件事件触发但不执行任何操作

Question

这是我的代码：

表格组件：

<template>
<rowcomponent @reloadTable="fetchData(pagination.current_page)" :item_data="item" :isDOMadd="false" :workflowoffer_id="workflowoffer_id"></rowcomponent >
</template
<script>
import rowcomponent from "./rowcomponent";
export default{
methods :{
fetchData(url){
console.log('test');
},
components: {
rowcomponent,
},
}
}
</script>

行组件：

<script>
export default{
methods :{
safeData(){
console.log('safe');
this.$emit('reloadTable');
}
},
}
</script>

控制台输出：

safe

Vue事件被触发(Vue devtool(，但它不会做任何

我知道它应该行得通，但不行。有人有一些解决方案或提示它可能是什么。

更新：所以我发现了错误，但我无法解释^^我在export default {...}:的表组件中添加了这一行

name: "TableComponent",

现在它工作起来了**

Answer 1

由于您没有完全共享行组件，所以我做了一个工作示例。你能看看这个并和你的比较一下吗？

父组件：

<template>
<div id="app">
<rowcomponent @reloadTable="reloadTable" />
</div>
</template>
<script>
import rowcomponent from "./components/rowcomponent";
export default {
name: "App",
methods: {
reloadTable () {
console.log("test")
}
},
components: {
rowcomponent
}
};
</script>

行成分

<template>
<div class="hello">
click me to see the results
<button @click="safeData"> click me </button>
</div>
</template>
<script>
export default {
name: "rowcomponent",
methods :{
safeData(){
console.log('safe');
this.$emit('reloadTable');
}
}
};
</script>

输出将是：安全和测试