Vue.extend心得

基本用法

const myConstructor = vue.extend("component-name",{
	template: "<div>{{text}}</div>",				//组件结构
	data(){                    						//组件数据
		return{
			text:""
		}
	},
	methods:{}                                      //组件方法
})

单文件组件用法

import mycomponents  from  "./components/mycomponents"
const myConstructor = vue.extend(mycomponents)

挂载

使用vue.extend()创建组件完成后使用vm.$mount()挂载到指定元素节点上
$mount()的返回值为当前组件实例

//直接挂载使用
new MyComponent().$mount('#app')
//或
new MyComponent().$mount(el:'#app')
//在文档之外渲染并且随后挂载
let component = new mycomponents().$mount()
document.body.appendChild(component.$el)       //$el 为当前组件实例使用的跟DOM元素

到此组件创建并挂载完成