vue.extend与vue.component

Vue.extend({}) 简述:使用vue.extend返回一个子类构造函数,也就是预设部分选项的vue实例构造器。(说那么多还是创建一个组件的意思,个人觉的有点类似于原生的createElement()的意思)
可以结合以下两种方式实现一个组件

一.可以使用vue.component进行实例化

// 注册组件,传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))

// 注册组件,传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })

// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component')

二. 使用new extendName().$mount(’’+el)方式进行实例化(从而实现模拟组件)

var MyComponent = Vue.extend({
  template: '<div>Hello!</div>'
})

// 创建并挂载到 #app (会替换 #app)
new MyComponent().$mount('#app')

// 同上
new MyComponent({ el: '#app' })

// 或者,在文档之外渲染并且随后挂载
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)

发布了11 篇原创文章 · 获赞 3 · 访问量 8781

猜你喜欢

转载自blog.csdn.net/weixin_44233892/article/details/104704793