Question

孩子正在发出自定义事件：

<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>标签。您的问题是错字吗？如果他们不在，那可以解释您遇到的问题。

请勿将Camel Case用于DOM属性，该属性也适用于发射器和自定义事件。

在您的孩子中，重构为：

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

在您的父母中，重构为：

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

通过codesandbox.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实际上不是父组件。这样做会导致其他一些问题。不用担心。

Vue父组件无法捕获子组件发出的事件

3 个答案: