vue封装api怎么封装的啊,vue如何封装一个自定义组件
本文主要介绍了vue如何定制和封装API组件，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
自定义封装api组件1。创建vue组件2。创建Alter.js生成组件3。导入vue如何封装以API形式调用的Vue组件子组件的父组件
自定义封装API组件
1.创建vue组件
模板
差异
div class=警报
通知中的项目:key=item.name
div class= alert-content“{ item . content } }/div
/div
/div
/div
/模板
脚本
//命名多个提示框
设seed=0；
函数getUuid() {
返回“alert_ ”(种子)；
}
导出默认值{
data() {
返回{
通知：[]//数组中保存了多个提示框
}
},
方法：{
添加(通知){
const name=get uuid()；//获取当前提示框名称
//Object.assign的浅表副本不会跳过值为[null]或[undefined]的源对象
//Object.assign(目标，来源)；目标：目标对象，源：源对象
let _notice=Object.assign({
名称：姓名
}，通知)；
//将当前提示框标签保存到通知中
this . notices . push(_ notice)；
//定时移除，以秒为单位
const time=notice.time 1.5
1.5s后调用remove方法。
setTimeout(()={
this.remove(名称)；
}，时间* 1000)；
},
删除(名称){
const notices=this.notices
for(设I=0；一、注意事项。i ) {
如果(通知[i].name===name) {
拼接(I，1)；
打破；
}
}
}
}
}
/脚本
样式lang=scss
/风格
2.创建Alter.js生成组件
从“vue”导入Vue
从“/components/Alter/Alter.vue”导入Alter
//Alter添加新属性，newInstance是函数，必需参数是properties。
Alter.newInstance=properties={
const props=properties { }；
//创建一个Vue组件对象
const Instance=new Vue({
资料：道具，
渲染(h){
return h(Alter，{
道具：道具
})
}
});
//在等待接口调用时实例化组件，避免进入页面时直接挂载在主体上。
常量组件=实例。$ mount()；
//实例化一个组件，然后将其安装到主体上
document.body.appendChild(组件。$ El)；
//通过闭包维护alter component的引用
const alter=实例。$ children[0]；
返回{
//向外界公开//Alter组件的两种方法
添加(通知提示){
alter . add(notice props)；
},
删除(名称){
alter.remove(名称)；
}
}
}
//提示单例
let messageInstance
函数getMessageInstance(){
message instance=message instance alter . new instance()；
返回messageInstance
}
//定义函数实现
功能通知({time= ，content=}){
let instance=getMessageInstance()；
instance.add({
时间：1.5，
内容：“”
})
}
//发布方法
导出默认值{
信息(选项){
退货通知(期权)；
}
}
3.导入Vue
从导入通知。/alert.js
//将其安装在Vue原型上
Vue.prototype.$Alert=alert
//然后在组件中使用它
这个。$ alert.info ({time: 1.5，content: hint})
如何封装使用api形式调用的vue组件
在实际开发中，一般有两种封装vue组件的方法：一种是常用的通过props父组件传递值给子组件的方法：
子组件
父组件
还有就是调用api的形式。下面这个例子是我自己在一个实际项目中打包的一个自定义图标的弹出组件。
首先实现组件的UI页面(css部分截图不完整)
在与vue文件相同的目录中创建新的alertTips.js文件。
页面调用方法：
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。