你好，我正在尝试实现一个树状视图。我有一个组件，它是分层的。我面临的问题是，发出是不工作的内部树组件。请帮助我。这是我的代码...

树项目.vue

<template>
  <div class="node" :style="{ marginLeft: depth * 20 + 'px' }">
    <span class="menu-item" v-if="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"
    />
</div></template>

<script>
export default {
  name: "TreeItem",
  props: {
    node: Object,
    depth: {
      type: Number,
      default: 0,
    },
    emits: ["add-state"],
  },
  data() {
    return {
      expanded: false,
    };
  },
methods: {
 addState() {
      console.log("Adding State"); //Prints this message to console
      this.$emit("add-state");
    },

},
};

</script>

地址管理器.vue

模板内部：

<div>
          <tree-item :node="treedata" @add-state="addState"></tree-item>
        </div>

内部方法：

addState() {
      console.log("State will be added"); //Never prints this message
    },

我们需要在单击按钮时发射。但是发射不起作用。