Vue extend使用示例深入分析

<template>
    <A/>
</template>
import A from "./A.vue";
export default {
  components: {
    A
  },
}

import Vue from "vue"
import A from "./A"
  Vue.component("A", A) 

import Vue from "vue";
// 检索目录下的模块
const req = require.context(".", true, /\.vue$/);
req.keys().forEach(fileName => {
  // require模块
    const componentConfig = req(fileName);
    const name =
      fileName.name ||
      fileName.replace(/^\.\/(.*\/)?/, "").replace(/\.vue$/, "");
      Vue.component(name, componentConfig.default || componentConfig);
});

   // 创建一个构造器
    const Constructor = Vue.extend(test);
    // 利用构造函数创建实例
    //创建过程中可 向组件中传入数据
    const instance = new Constructor({
      propsData:{
        age:'23'
      }
    });
    // instance.age = 29
    // 挂载到某个dom上
    instance.$mount(this.$refs.container)

<template>
  <div class="container">
    我是扩展，挂接外面的div的组件啦
    <div>{{ age }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  }
};

<template>
  <div class="container">我是扩展，挂接外外面的div的组件啦
  <div>{{age}}</div>
  </div>
</template>
<script>
export default {
   props: {
     age: {
       type: String,
       default: ""
    }
  }
};

<template>
  <div ref="container" class="container">
  </div>
</template>
<script>
import Vue from "vue";
import test from "./components/Vue.extend/test";
export default {
  mounted() {
    // 创建一个构造器
    const Constructor = Vue.extend(test);
    // 利用构造函数创建实例
    //创建过程中可 向组件中传入数据
    const instance = new Constructor({
      propsData:{
        age:'23'
      }
    });
    // 挂载到某个dom上
    instance.$mount(this.$refs.container)
  },
  methods: {}
};
</script>

<template>
  <div class="container">我是扩展，挂接外外面的div的组件啦
  <div>{{age}}</div>
  </div>
</template>

<template>
  <div ref="container" class="container">
  </div>
</template>
<script>
import Vue from "vue";
import test from "./components/Vue.extend/test";
export default {
  mounted() {
    // 创建一个构造器
    const Constructor = Vue.extend(test);
    // 利用构造函数创建实例
    //创建过程中可 向组件中传入数据
    const instance = new Constructor();
    //可以直接以属性方式挂接到实例上
    instance.age = 29
    // 挂载到某个dom上
    instance.$mount(this.$refs.container)
  },
};
</script>