vue 点击按钮实现动态挂载子组件

Vue.extend( options )

• 参数：

  • {Object} options

• 用法：

  使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

  data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数

示例：子组件 byMount.vue

<template>
 <div>
  <div>mount content test!!</div>
  </div>
</template>
<script >
import Vue from 'Vue';
  export default {
  	name: 'bycount',
    data () {
      return {        
     }
   },  
   methods:{
 },
 }	
</script>

父组件：

      <div class="dync mount">dyncMount root</div>
      <button @click = "dyncMount">dyncMount</button>
--------------------------------------------------------------------
.....
import byMount from './byMount.vue';
....
  export default {
      name: 'parent',
       methods:{
        dyncMount(){
         var Profile = Vue.extend(byMount);
    // 创建 Profile 实例，并挂载到一个元素上。
          new Profile().$mount('.dync.mount');
   }
.....
}