如何向使用 Vue.extent() 动态生成的组件添加发射信息？

Question

我正在使用 Vue.extent() 以这种方式动态生成我的子组件 "Action.vue" 的实例：

let ActionClass = Vue.extend(Action)
let ActionInstance = new ActionClass({
  store
})
ActionInstance.$mount()
this.$refs.actions.appendChild(ActionInstance.$el)

这很好用。但是，除了访问商店之外，子组件还需要发出一个事件（以响应用户与其元素之一的交互），以便父组件执行方法。

如何实现？

Answer 1

https://vuejs.org/v2/guide/components-custom-events.html https://vuejs.org/v2/api/#Options-Lifecycle-Hooks

您可以使用生命周期挂钩（例如：mounted）在创建子项时发出事件。您可以收听文档中记录的事件。

可以通过 this.$store.

到达商店

Answer 2

您可以使用 instance.$on 方法动态添加 eventListeners :

Consumer

import Dummy from "./Dummy.vue";
import Vue from "vue";
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  methods: {
    mount: function() {
      const DummyClass = Vue.extend(Dummy);
      const store = { data: "some data" };
      const instance = new DummyClass({ store });
      instance.$mount();
      instance.$on("dummyEvent", e => console.log("dummy get fired", e));
      this.$refs.actions.appendChild(instance.$el);
    }
  }
};

Child component

export default {
  methods: {
    fire: function() {
      console.log("fired");
      this.$emit("dummyEvent", { data: "dummyData" });
    }
  }
};

这是Sandbox

如何向使用 Vue.extent() 动态生成的组件添加发射信息？

How to add emit information to a component dynamically generated using Vue.extent()?

emit

vue.js