#1.前端测试代码
<div id="app">
<!-- 显示全局组件 -->
<root></root>
</div>
<!-- 将全局组件抽离 -->
<template id="test">
<div>
<h1>123</h1>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//使用extend函数,添加模板
var test1=Vue.extend({
template:'#test'
})
//自定义注册全局组件,
Vue.component('root',test1)
//挂载全局组件
new Vue({
el:'#app',
})
</script>
#2.代码调试,源码解读(详细注释)
#.3.实现原理
看完#2.的调试,我想你已经知道啦vue中extend的返回类型,实现过程,
extend返回的是一个构造函数,vue.component利用返回的构造函数,进行传入,通过类型的判断,封装成一个组件,并且加入vue.options中,返回组件。