引言
比如toast、messageBox、alert等，如果作为组件使用，则每个用到的地方都需要引入、注册等操作；如果把组件封装成插件，并作为实例的公共方法，则在整个应用中即可随处调用。
大部分组件的使用，基本都是通过方式导入，这也是最常用的。但是有些时候也需要通过API方法的形式调用。比较常见的比如
Message 消息提示。这里主要介绍3.x版本的写法，2.x版本可以看我的另一篇文章，简单写了个例子以及自己的理解。
API方式加载组件
new Vue
new Vue({}),创建一个vm实例，然后通过vm.$mount('#app')挂载到app div上。
Vue.extend
-
Vue.extend({}),创建一个组件，组件的本质是一个VueComponent构造函数。
-
cosnt s = Vue.extend({options})可以简写为const s = {options}。简写也调用了Vue.extend。
-
写组件标签时，就会创建school组件实例对象，相当于
new VueComponent({options})。
-
每次调用Vue.extend，返回的都是一个新的VueComponent。内部sub变量接收VueComponent函数，返回sub。
vc是可复用的vm。el是vm特有的。VueComponent.prototype.__proto__ ==Vue.prototype
所以vc能够访问的Vue原型上的方法。
Vue.component
创建一个组件，并全局注册。而Vue.extend，创建一个组件。需要在app组件中用components局部注册。
// Vue.extend扩展子类
var subExtendClass = Vue.extend({
name: 'SubExtendClass',
data: function () {
return {
name: 'php'
};
},
template: "<p>hi {{name}}, I'm dclnet</p>"
});
window.subExtendClass = subExtendClass;
console.log('Vue.extend class: subExtendClass ', subExtendClass);
// -----------------------------------------------
// Vue.component注册组件
var subComponent = Vue.component('SubComponent', {
data: function () {
return {
name: 'java'
};
},
template: "<p>hello {{name}}, I'm dclnet</p>"
});
window.subComponent = subComponent;
console.log('Vue.component class: subComponent ', subComponent);
// ===============================================
// html中使用组件
<div id="dclnet" >
<sub-component></sub-component>
<sub-extend-class></sub-extend-class>
</div>
window.app = new Vue({
el: '#dclnet',
// 注意：这里直接放components里面，局部注册 <<<<<
components: {
'sub-extend-class': subExtendClass
}
});
调用vue组件返回promise
//创建组件实例
const createInstance = (properties, currentCom) => {
const props = properties || {}
// 实例化一个组件挂载带dom元素
const Instance = new Vue({
data: props,
// provide: {
// foo: 'dd'
// },
render(h) {
return h(currentCom, {
props: {
...props,
},
//inject: ['foo'],
})
},
})
const component = Instance.$mount()
document.body.appendChild(component.$el)
window.addEventListener('popstate', (event) => {
try {
component && component.$el && document.body.removeChild(component.$el)
// eslint-disable-next-line no-empty
} catch (error) {}
})
return Instance.$children[0]
}
包装组件promise
const createPromiseCom = (
options,
component) => {
try {
let instance: {
apiCalled ? : any
$el ? : any
}
return new Promise((resolve, reject) => {
const wrapOptions = {
...options,
resolve,
reject,
}
instance = createInstance(wrapOptions, component)
return instance.apiCalled(wrapOptions)
}).finally(() => {
instance && document.body.removeChild(instance.$el)
})
} catch (error) {
return Promise.resolve(true)
}
}
//调用方式
createPromiseCom(props, 组件名)
// 组件需要提供 apiCalled 方法，且会注入resolve/reject 方法属性
调用过程
- 编写组件
- 调用Vue.extend()方法，创建构造器
- 创建组件实例
- 挂载并插入文档
- 往构造器上添加回调，监听用户的操作，取消还是确定
- 创建Promise的实例
- 添加方法到Vue的原型和实例上
- 监听浏览器的前进、后退事件，当离开页面的时候，隐藏组件
