我们创建Vue实例时,都会有一个el选项,来指定实例的根节点,如果不写el选项,那组件就处于未挂载状态。Vue.extend 的作用,就是基于 Vue 构造器,创建一个‘ 子类 ’,它的参数跟new Vue的基本一样,但data要跟组件一样,是个函数,再配合$mount,就可以渲染组件,并且挂载到任意指定的节点上,比如body(这是单文件组件做不到的)
下面我们就来看个例子:
<template>
<div id="about"></div>
</template>
<script>
import Vue from 'vue/dist/vue.js'
var Profile = Vue.extend({
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
// 创建 Profile 实例,并挂载到一个元素上。
let profile=new Profile().$mount();
export default {
mounted(){
let divid=document.getElementById('about');
divid.appendChild(profile.$el)
}
}
</script>
这里需要注意几个点:
- 报错信息
如果有小伙伴遇到了这个问题,那么你导入的是
import Vue from 'vue'
这个时候只需要修改成即可解决问题
import Vue from 'vue/dist/vue.js'
- 在单文件组件中的挂载问题:
因为这里是通过获取节点的方式添加到某个元素内,所以一定要在钩子函数中挂载,确保当前页面的dom节点加载完成。
mounted(){
let divid=document.getElementById('about');
divid.appendChild(profile.$el)
}