vue.extend()以及vue.component()

├──两种类型的组件的实现（通过Vue.use()方法使用组件以及通过api调用组件）
├──vue.extend()
├──vue.component()
────────────────────────────────────────────────

vue.extend()

使用基础 Vue 构造器，创建一个Vue 子类构造器。参数是一个包含组件选项的对象，也就是预设了部分选项的Vue实例构造器。

1、通过构造函数Vue 创建一个Vue 的根实例:
var vm=new Vum({
  // 选项
})

2、使用Vue.extend 创建一个扩展构造器：
var baiduExtend=Vue.extend({
  // 扩展选项
})

作用
1、一个用来服务于Vue.component，用来生成组件。
```
//注册组件
Vue.component('my-component', Vue.extend({ /* ... */ }))
```
2、通过调用扩展实例构造器来创建组件实例，并挂载到自定义元素上。
```
//自定义元素
<baidu></baidu>

//编写一个扩展实例构造器
var baiduExtend=Vue.extend({})
      
//扩展实例构造器进行挂载
new baiduExtend().$mount('baidu')

//还可以通过id或者class来挂载
// new baiduExtend().$mount('#baidu')
```
3、同第二步，生成的实例并不一定要"挂载到一个元素上"，new 实例().$mount() 的 $mount()的参数可以为空，它依旧能生成一个实例。
- 生成的实例里面有$el这个参数，即生成的dom，这个dom想插哪里就插哪里；
- 除了在通过在模板中嵌入组件到children挂载组件，Vue还为组件提供了手动挂载的方法$mount；
```
let component = new MessageBox().$mount()
document.getElementById('app').appendChild(component.$el)
```

vue.component()

注册组件和获取注册的组件

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

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

// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component')
//即
VueComponent (options) {
    this._init(options);
}

转载于:https://www.jianshu.com/p/392233c21eb8

vue.extend()以及vue.component()

猜你喜欢