Vue.js中v-slot模板调用函数报错：getNameFromCategory未定义

嘿，我来帮你搞定这个问题！你遇到的getNameFromCategory is not defined错误主要有三个原因，咱们一个个拆解：

1. 拼写错误导致方法未注册 #

你父组件里的metdods是拼写失误！正确的属性名应该是methods（少了个h），Vue根本识别不了这个拼写错误的选项，导致你的方法压根没被注册到组件里，自然找不到它。

2. 对作用域插槽的作用域理解有误 #

你以为插槽里的代码是在子组件里执行的，这是个常见误区！Vue的所有插槽（包括作用域插槽）的内容，都是在父组件的作用域内编译执行的。所以哪怕你在子组件TableView里定义getNameFromCategory，插槽里的代码也访问不到——它只会找父组件里的方法。

3. 父组件的模板结构错误 #

你把v-slot:items写在了包裹TableView的外层<template>上，这完全不对！v-slot必须绑定在子组件提供的插槽对应的<template>上，也就是要放在TableView组件内部的<template>标签上，这样才能正确接收子组件传递的row参数。

修正后的完整代码 #

父组件代码 #

<template>
  <!-- 正确：v-slot写在TableView内部的template上 -->
  <TableView :rows="results" >
    <template v-slot:items="{ row }" >
      <td>{{ getNameFromCategory(row.category) }}</td>
    </template>
  </TableView>
</template>

<script>
import TableView from './TableVue.vue' // 若未全局注册组件，别忘了导入

export default {
  components: { TableView },
  // 修正拼写：metdods → methods
  methods:{ 
    getNameFromCategory(category) {
      // 这里写你的方法逻辑，比如：
      const categoryMap = {
        '1': '分类A',
        '2': '分类B'
      }
      return categoryMap[category] || '未知分类'
    }
  },
  props: {
    results: { 
      type: Array, 
      required: true 
    },
  }
}
</script>

子组件TableVue.vue代码（仅补充规范标签，核心逻辑没问题） #

<template>
  <table> <!-- 建议加上table标签，避免tr/td不符合HTML规范 -->
    <template v-if="rows.length > 0">
      <tr v-for="(row, idx) in rows" :key="idx" >
        <slot name="items" :row="row"></slot>
      </tr>
    </template>
  </table>
</template>

<script>
export default {
  name: 'TableView',
  props:{
    rows: { 
      type: Array, 
      default() { return [] }, 
      required: true 
    },
  }
}
</script>

这样修改之后，你的方法就能被正确调用，插槽也能正常接收子组件传递的row数据啦！

内容的提问来源于stack exchange，提问作者Мануэль Кордоба