分层组件未在Vue js中发送发射

zphenhs4  于 2022-11-25  发布在  Vue.js
关注(0)|答案(2)|浏览(83)

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

树项目.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
    },

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

dtcbnfnu

dtcbnfnu1#

所以我已经解决了这个问题...我们需要用this.$parent.$emit()替换this.$emit()
这是零钱-

addState() {
      console.log("Adding State"); //Prints this message to console
      this.$parent.$emit("add-state");
    },

希望这解决了我的问题。

bvhaajcl

bvhaajcl2#

您可以使用v-on="$listeners”来传递深度www.example.com内的级别之上的发射https://v2.vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components,它只会将它们转发给父级。
但是在嵌套的场景中,使用store(vuex)和assign一个属性会更方便,然后从任何你想注意到它的变化的地方观察属性的变化。https://vuex.vuejs.org/api/#watch商店属性可以被监视。

相关问题