vue怎么自定义封装API组件

这篇文章主要介绍vue怎么自定义封装API组件，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

自定义封装API组件

1.创建vue组件

2.创建Alter.js生成组件

import Vue from 'vue'import Alter from '/components/Alter/Alter.vue'//Alter添加新属性，newInstance是个函数需求参数为propertiesAlter.newInstance=properties=>{    const props=properties || {};    //创建一个Vue组件对象    const Instance=new Vue({        data:props,        render(h){            return h(Alter,{                props:props            })        }    });    //等待接口调用的时候在实例化组件,避免进入页面就直接挂载到body上    const component=Instance.$mount();    //实例化一个组件,然后挂载到body上    document.body.appendChild(component.$el);    //通过闭包维护alter组件的引用    const alter=Instance.$children[0];    return{        //Alter组件对外暴露的两个方法        add(noticeProps){            alter.add(noticeProps);        },        remove(name){            alter.remove(name);        }    }}//提示单例let messageInstance;function getMessageInstance(){    messageInstance=messageInstance || Alter.newInstance();    return messageInstance;}//定义函数实现function notice({time='',content=''}){    let instance=getMessageInstance();    instance.add({        time:1.5,        content:''    })}//公布方法export default{    info(options){        return notice(options);    }}

3.导入Vue

import alert from './alert.js'// 挂载到Vue原型上Vue.prototype.$Alert = alert// 然后在组件中使用this.$Alert.info({time: 1.5, content: '提示'})

如何封装使用api形式调用的vue组件

在实际开发中一般有两种封装vue组件的方法：一种就是常用的的通过props父组件传值给子组件的方法：

子组件

父组件

还有一种就是通过调用api的形式，下面例子是本人在实际项目中封装的一个自定义图标的弹窗组件

首先实现组件的UI页面(css部分截图不完整)

在vue文件的同目录下新建alertTips.js文件

页面中调用方法：

以上是"vue怎么自定义封装API组件"这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！