如何处理动态挂载的组件的事件？

Question

我有一个组件，定义为：

Calculator.vue

    <template>
       ...
    </template>

    <script>
    export default {
      data: function () {
        return {
          value: 0,
        };
      },
      methods: {
        ...
        insert() {
          this.$emit('insert',Number(this.value))
        },
      },
    };
    </script>

现在，我有了另一个组件来膨胀Popup，它包含我的Calculator组件。

Main.vue

    <template>
       ...
    </template>

    <script>
    import Calculator from "../../ui/Calculator.vue";
    export default {
      data: function () {
        return {};
      },
      methods: {
        openCalculator() {
          this.$popup("append", {
            component: Calculator,
          });
        },
      },
    };
    </script>

弹出组件只是充当组件包装器的第三方组件。因此，我需要将它始终包含在我的App.vue中

    <template>
      <div id="app">
        <router-view />
        <VuePopupPlugin :config="popupDefaultConfig" />
      </div>
    </template>

    <script>
    import Vue from "vue";
    import CiaoVuePopup from "ciao-vue-popup";
    Vue.use(CiaoVuePopup);
    export default {
      name: "app",
      ...
    };
    </script>

如何处理来自我的'insert'组件的充气Calculator的Main事件？

Answer 1

使用v-on="$listeners"

实际上我建议使用Vuex。但如果不是这样，你可以这样做。

在中间组件Popup中，从其子组件Calculator捕获事件。如果它是一个动态组件，它也能工作。不要对这个事件做任何事情，除非把它泡到Main上。这就是v-on="$listeners"所做的：

<!-- In `Popup` -->
<Calculator v-on="$listeners"></Calculator>

然后在Main中，创建监听器，就好像Calculator是它的直接子组件一样，并将其放置在中间组件Popup上。

<!-- In `Main` -->
<VuePopupPlugin @insert="insert" :config="popupDefaultConfig" />

methods: {
  insert() {
    console.log('Woo inserting');
  }
}

它的工作是因为$listeners在Popup中捕获来自其父Main的所有侦听器，并将它们应用到其子组件Calculator，就好像中间组件没有阻碍。您可以通过对所有中间组件使用v-on="$listeners"来链接多个中间组件。

下面是一个演示：

​

Vue.component('Calculator', {
    template: `
  <div class="calc">
    CALCULATOR:
    <button @click="insert">Insert</button>
  </div>`,
  data: function () {
    return {
      value: 1000,
    };
  },
  methods: {
    insert() {
      this.$emit('insert', Number(this.value))
    },
  }
})

Vue.component('Popup', {
  template: `
  <div class="popup">
    POPUP:
    <component :is="comp" v-on="$listeners"></component>
  </div>
  `,
    data() {
      return {
        comp: 'Calculator'
      }
    }
});

/***** APP *****/
new Vue({
  el: "#app",
  data() {
    return {
        someEventData: null
    }
  },
  methods: {
    insert(eventData) {
        this.someEventData = eventData;
    }
  }
});

.calc, .popup {
  padding: 24px;
}
.calc {
  background: #dddddd;
}
.popup {
  background: #FF99FF;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  ROOT
  <Popup @insert="insert"></Popup>
  From grandchild (calculator): {{ someEventData }}
</div>

​

您可以使用Vuex来避免这种情况，方法是让所有组件发出并从一个集中存储中检索数据。