Vue3子组件向父组件触发事件时出现警告与错误求助

问题根源 #

你的错误源于模板中错误地将handleFilters方法的调用包裹在$emit中，同时links的Prop类型定义错误，另外a标签的默认跳转行为也可能引发问题。

修复步骤 #

1. 修正模板中的点击事件绑定 #

子组件模板里的@click不需要用$emit包裹handleFilters，因为handleFilters方法内部已经通过this.$emit触发了事件。同时给a标签添加.prevent修饰符阻止默认跳转行为：

Pagination.vue 模板部分

<div class="pagination">
  <button class="btn btn-secondary paginate-prev" @click="handleFilters({prevPage: currentPage})">Prev</button>
  <div class="links">
    <span 
      v-for="link in links" 
      :key="link.id" 
    >
      <a 
        :class="link.active ? 'active' : ''" 
        href="#" 
        @click.prevent="handleFilters({showPage: link.label})"
      >
        {{link.label}}
      </a>
    </span>
  </div>
  <button class="btn btn-secondary paginate-next" @click="handleFilters({nextPage: currentPage})">Next</button>
</div>

2. 修正links的Prop类型 #

你在Props里定义links为Object，但实际用v-for遍历它，说明links应该是数组类型，修正脚本部分：

Pagination.vue 脚本部分

export default {
  props: {
    links: {
      type: Array,
      required: true
    },
    currentPage: {
      type: Number,
      required: true
    }
  },
  methods: {
    handleFilters(payload){
      this.$emit('handle-filters', payload)
    }
  }
}

3. 确认父组件的事件处理逻辑 #

父组件的绑定是正确的，确保handleFilters方法已正确实现分页逻辑：

Home.vue 脚本示例

export default {
  data() {
    return {
      currentPage: 1,
      links: [] // 确保是数组格式的分页数据
    }
  },
  methods: {
    handleFilters(payload) {
      // 根据子组件传递的参数更新当前页码
      if (payload.prevPage) {
        this.currentPage = payload.prevPage - 1
      } else if (payload.nextPage) {
        this.currentPage = payload.nextPage + 1
      } else if (payload.showPage) {
        this.currentPage = payload.showPage
      }
    }
  }
}

错误原因解释 #

• 模板中@click="$emit(handleFilters(...))"的写法错误：handleFilters方法内部已经执行了this.$emit，你不需要再在模板里调用$emit。Vue会把handleFilters的返回值（undefined）当作事件名去处理，内部调用startsWith方法时因为事件名为undefined，所以抛出Cannot read properties of undefined (reading 'startsWith')错误。
• links的Prop类型定义为Object，但实际是数组，可能导致遍历异常。
• a标签的href="#"会触发页面默认跳转，添加.prevent修饰符可以阻止这个行为，避免不必要的页面刷新。

内容的提问来源于stack exchange，提问作者Dusan