使用Vue.entends()编写vue插件，然后插入dom元素中

子组件 Son.vue

<template>
  <div>
    我是一个子组件内容，里面可以任意拓展
    接受到父组件值为{{msg}}
  </div>
</template>

<script>
export default {
props:{
  msg:{
    type:String,// 这里还可以接受父组件传参
    default:'',
  }
}
}
</script>

<style>

</style>

父组件：

  <template>
  <div id='box'>
   
  </div>
</template>
import Son from '@/components/Son.vue'
export default {
components:{
Son 
}
 mounted() {
  const Son= Vue.extend(Toast)
        const instance = new Son({
            propsData: {
              msg:"子组件信息"
            } // 这里必须是propsData
        })
 let box = document.getElementById('box');
   // instance.$mount().$el 该段代码意义为：
   // 文档之外渲染，并且获取该实例的根DOM元素，将其插入到body元素中。
   box.appendChild(instance.$mount().$el) 
}
 }
}

父组件中显示如下：

很多人会疑问 instance.$mount().$el 是啥意思？

我们先看看官网解释：

我们的情况是

1. Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。

2. 如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。

刚好满足以上两点。

有无其他写法：

肯定有，我们传给 el 选项试试：

  const instance = new ToastMain({
          el:document.createElement("div"),
            propsData: {
              msg:"子组件信息"
            } // 这里必须是propsData
        })
    	// Vue 实例在实例化时收到了 el 选项，则它处于“挂载”状态，无需用$mount() 手动挂载
        let box = document.getElementById('box');
        console.log("box是",box);
        box.appendChild(instance.$el) 

Vue.entends()的作用之一：

可以快速的将写好的组件插入dom元素中，提高开发效率。