Vue 父組件無法捕獲子組件發出的事件

Question

Child 正在發出一個自定義事件：

<template>
  <div id="controls-container" class="controls-container">
    <div class="control-button icon-zoom-in" @click="zoomHandler('+')"></div>
    <div class="control-button icon-zoom-out" @click="zoomHandler('-')"></div>
    </div>
  </div>
</template>

<script>

export default {
    name: "ControlsContainer",
    methods: {
        zoomHandler(direction) {
            console.log("this will print");
            this.$emit('zoomHandler', direction);
        }
    }
};

</script>

父母沒有抓住它：

<template>
  <div id="map" ref="map" class="navigation-map">
    <controls-container @zoomHandler="zoom"></controls-container>
  </div>
</template>

<script>

import ControlsContainer from "./ControlsContainer.vue";

export default {
    name: "NavigationMap",
    components: { ControlsContainer },
    methods: {
        zoom(direction) {
            console.log("will not print");
            if (direction === "+") {
                this.map.zoomIn();
            } else if (direction === "-") {
                this.map.zoomOut();
            } else {
                // Do nothing
            }
        },
    },

</script>

我現在已經閱讀了大約 7 篇關於這方面的教程，它們都展示了它是如何以與我完全相同的方式完成的。 考慮到我在這件事上浪費的時間，我真的希望這不是一件很簡單的事情......

Answer 1

我注意到您的子組件中缺少<script>標記。 你的問題是那個錯字嗎？ 如果他們不在那里，那么這可以解釋你遇到的問題。

不要對 DOM 屬性使用 Camel Case，這也適用於發射器和自定義事件。

在您的孩子中，重構為：

this.$emit('zoom-handler', direction);

在您的父母中，重構為：

<controls-container @zoom-handler="zoom"></controls-container>

通過代碼和框的工作示例。io 。 我必須在新窗口/標簽中打開預覽才能正確顯示。

Answer 2

您可以使用它作為替代方案。

<template>
  <div id="controls-container" class="controls-container">
    <div class="control-button icon-zoom-in" @click="zoomHandler('+')"></div>
    <div class="control-button icon-zoom-out" @click="zoomHandler('-')"></div>
    </div>
  </div>
</template>

export default {
    name: "ControlsContainer",
    methods: {
        zoomHandler(direction) {
            console.log("this will print");
            this.$root.$emit('zoomHandler', direction);
        }
    }
};



<template>
  <div id="map" ref="map" class="navigation-map">
    <controls-container></controls-container>
  </div>
</template>

<script>

import ControlsContainer from "./ControlsContainer.vue";

export default {
    name: "NavigationMap",
    components: { ControlsContainer },
    methods: {
    },
    beforeDestroy(){
      this.$root.$off("zoomHandler")
    },
    mounted(){
      this.$root.$on("zoomHandler", (direction)=>{
        if (direction === "+") {
                this.map.zoomIn();
            } else if (direction === "-") {
                this.map.zoomOut();
            } else {
                // Do nothing
            }
      })
    }
</script>

Answer 3

這些組件沒有嵌套，因此 Map 實際上不是父級。 這樣做會導致其他一些問題。 不值得麻煩。