Vue.js层级TreeItem组件emit事件无法触发问题求助

核心错误 #

你的TreeItem组件中，emits选项被错误嵌套在props对象内部，Vue无法识别这个事件声明，导致$emit无法正确触发父组件的监听方法。

修正步骤 #

1. 将emits选项移到与props、data同级的位置，这是Vue组件声明自定义事件的正确位置。
2. 模板中的type变量未定义，需改为从node属性中获取（比如node.type == 'country'），确保按钮渲染逻辑的规范性。
3. 若树形结构存在多层嵌套，需在子TreeItem上监听add-state事件并向上传递，保证深层节点的事件能传递到顶层父组件。

修正后的TreeItem.vue代码 #

<template>
  <div class="node" :style="{ marginLeft: depth * 20 + 'px' }">
    <span class="menu-item" v-if="node.type == 'country'">
      <button class="menu-button menu-button--orange" @click="addState()">
        Add State
      </button>
    </span>
    <TreeItem
      v-if="expanded"
      v-for="child in node.children"
      :key="child.name"
      :node="child"
      :depth="depth + 1"
      @add-state="$emit('add-state')"
    />
  </div>
</template>

<script>
export default {
  name: "TreeItem",
  props: {
    node: Object,
    depth: {
      type: Number,
      default: 0,
    },
  },
  // 移至props外部，正确声明自定义事件
  emits: ["add-state"],
  data() {
    return {
      expanded: false,
    };
  },
  methods: {
    addState() {
      console.log("Adding State");
      this.$emit("add-state");
    },
  },
};
</script>

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