需求
实现以 API 的形式调用自定义组件，可以在vue实例上下文中调用，也可以在普通js文件中调用。
需求分析
以上的需求到底有何应用场景
1：全局弹框
有时候我们需要要非vue的上下文环境中调出全局弹框，例如在异步接口调用的时候，有一些全局错误码需要统一处理，这里如果要分散到接口调用的位置去处理显然会有很多重复代码。我们需要在接口文件中对错误码错中相应处理，如下所示：
api().then((response) => {
if(response.code === 'error'){
//弹出错误提示框
toast("服务端错误")
}
},(response)=>{
//弹出错误提示框
toast("网络错误")
})
可以看出以上弹出错误提示框的位置最好是通过api的形式调用 并且 其不再vue的上下文环境中。
需求有了，那么该种形式的组件该如何实现呢？
实现原理
这里我们有一个普通的vue组价toast
/****toast.vue****/
<template>
<div>this is toast</div>
</template>
<script>
export default {
props: {
},
data () {
return {
}
},
created () {
},
mounted () {
console.log("toast mounted")
},
beforeDestroy () {
console.log("toast destroyed")
}
}
</script>
<style rel="stylesheet/scss" lang="scss">
</style>
当我们使用
toast from './toast'
时得到了一个对象:
{
data: function(){
return {
}
},
props:{
},
render: function() {
}
......
}
我们可以借助该对象来得到创建组件额构造函数
const ToastConstructor = Vue.extend(toast);
通过
var instance = new ToastConstructor({
el: document.createElement('div')
});
得到组件实例。目前组件还没能在页面上渲染，我们通过
document.body.appendChild(instance.$el);//这里就是向body元素添加了子元素，而不依赖于某vue父组件。
使其渲染到页面上。
另外我们可以改造一下.vue组件
/****toast.vue****/
<template>
<div v-if="visible">this is toast</div>
</template>
<script>
export default {
props: {
},
data () {
return {
visible: false
}
},
created () {
},
mounted () {
console.log("toast mounted")
},
beforeDestroy () {
console.log("toast destroyed")
}
}
</script>
<style rel="stylesheet/scss" lang="scss">
</style>
通过visible控制弹出层组件的渲染与销毁:
instance.visible = false //会将DOM元素删除
封装
在toast.js文件中对以上过程做进一步封装即可实现以api形式调用的vue组件。
总结
vue给我们提供了灵活的使用方式，我们平时的开发可能只局限于.vue文件的封装以及实现，但这并不代表vue的全部，我们要乐于尝试自己没有使用过的方式，进而对vue有更深入的理解。
网友评论