Question

我遇到一个问题，其中动态组件（swap-components或A.vue）发出的自定义事件（B.vue）未在动态父类中正确侦听组件（HelloWorld.vue）。

这是source on GitHub（使用vue cli 3创建）。

在实时演示中，您将看到单击动态组件中具有背景色的按钮不会更改动态组件。但是，当单击背景颜色（起源于HelloWorld.vue）下方的按钮时，动态组件确实发生了变化。

为什么会发生这种情况以及如何解决？

下面，我将感兴趣的3个主要文件的内容复制到这篇文章中：

HelloWorld.vue（父级）
A.vue（动态组件中使用的子组件）
B.vue（动态组件中使用的子组件）

HelloWorld.vue：

<template>
  <div>
    <h1>The dynamic components ⤵️</h1>
    <component
      :is="current"
      v-bind="dynamicProps"
    ></component>
    <button
      @click="click"
    >Click me to swap components from within the parent of the dynamic component</button>
  </div>
</template>

<script>
import A from "./A.vue";
import B from "./B.vue";

export default {
  data() {
    return {
      current: "A"
    };
  },
  computed: {
    dynamicProps() {
      return this.current === "A" ? { data: 11 } : { color: "black" };
    }
  },
  methods: {
    click() {
      this.$emit("swap-components");
    },
    swapComponents() {
      this.current = this.current === "A" ? "B" : "A";
    }
  },
  mounted() {
    this.$nextTick(() => {
      // Code that will run only after the
      // entire view has been rendered
      this.$on("swap-components", this.swapComponents);
    });
  },
  components: {
    A,
    B
  },
  props: {
    msg: String
  }
};
</script>

A.vue：

<template>
  <section id="A">
    <h1>Component A</h1>
    <p>Data prop sent from parent: "{{ data }}"</p>
    <button @click="click">Click me to swap components from within the dynamic component</button>
  </section>
</template>

<script>
export default {
  props: ["data"],
  methods: {
    click() {
      this.$emit("swap-components");
    }
  }
};
</script>

B.vue：

<template>
  <section id="B">
    <h1>Component B</h1>
    <p>Color prop sent from parent: "{{ color }}"</p>
    <button @click="click">Click me to swap components from within the dynamic component</button>
  </section>
</template>

<script>
export default {
  props: ["color"],
  methods: {
    click() {
      this.$emit("swap-components");
    }
  }
};
</script>

Answer 1

我猜这是因为事件侦听器正在侦听父组件本身发出的swap-components事件。也许您可以通过侦听子组件中的swap-components事件然后在父组件上发出事件来解决此问题。

<template>
  <div>
    <h1>The dynamic components ⤵️</h1>
    <component
      :is="current"
      v-bind="dynamicProps"
      @swap-components="$emit('swap-components')"
    ></component>
    <button
      @click="click"
    >Click me to swap components from within the parent of the dynamic component</button>
  </div>
</template>

或者当子组件发出事件时，您可以直接调用方法。

<template>
      <div>
        <h1>The dynamic components ⤵️</h1>
        <component
          :is="current"
          v-bind="dynamicProps"
          @swap-components="swapComponents"
        ></component>
        <button
          @click="click"
        >Click me to swap components from within the parent of the dynamic component</button>
      </div>
    </template>

Answer 2

使用功能时，

this不再绑定到上下文。仅限于功能范围。使用箭头功能让this绑定到父上下文。

更改：

this.$nextTick(function() {

使用：

this.$nextTick(() => {

从动态组件子级发出事件时，Vue`vm。$ on（）`回调在父级中不起作用

2 个答案: