Vue.extend与$mount的联系使用以及一类应用场景

使用场景

这里先说一种可能的应用场景，看看你是怎么解决的

比如在你的项目中，不得不使用一个api，其中他的一些函数一些属性接收的参数只能是一个html如下，而这时你恰巧需要丰富这个html的内容，而且内容很多且不同，css很丰富，甚至里面有大量的逻辑需要写可能还要调一些接口，想要这时最好用一个组件来代替他，而不是在这里写，在这里写是一种灾难，那么怎么办？

   XXXX.setHTML(`<p>行政区域： ${address}</p>`)

这里他只接收html，用组件放在这里是没有用的，那我们怎么才能把这里面的东西替换成一个组件呢？

使用Vue.extend与$mount

为了解决这个问题，我们引入了vue.extend与$mount，当然他们可能有更多的使用场景，目前我只遇到这个。
extend是用来创建一个组件构造器，他可以接收一个组件来当做他的一个参数，返回的是这个组件的一个构造器，
$mount是用来挂载元素的
有了这两个东西，我们能不能用extend来生成一个组件构造器，然后在使用的地方实例化一个组件，然后挂载到上面的元素上呢，这当然可以。

具体操作就是如下所示

import Vue from 'vue'

//我想要塞进去的一个组件，该组件负责展示一下点的详细信息
import detail from '@/views/Detail.vue' 
// 利用vue.extend 生成一个该组件的构造器
const detailItem = Vue.extend(detail) 
//这里必须有一个唯一ID
XXXX.setHTML(`<div id='datail'></div>`)
// new一个实例，将生成的组件挂载到上面的dom上，相当于用组件把上面那个dom替换了
new detailItem ().$mount('#detail')