vue动态组件注入数据

之前也没有研究过动态组件，前两天有人问我动态组件的问题，给他解决了下顺便也记录下来。

<template>
  <div class="home">
    <div ref="currentView"></div>
  </div>
</template>

<script>
import Vue from "vue";
export default {
  name: "home",
  data() {
    return {
    };
  },
  created() {
    console.log(this);
    this.init();
  },
  methods: {
    init() {
      let mainData = this.$root.mainData;
      this.registerComponent().then(Component => {
        new Component({
          data() {
            return {
              mainData
            };
          }
        }).$mount(this.$refs.currentView);
      });
    },
    registerComponent() {
      return import(`./test`).then(component => {
        return Vue.extend(component.default);
      });
    }
  }
};
</script>

**

如果引入的组件之前的开发者写了很多this.xx，需要将这些注入到组件中。

**