vue如何自定义封装API组件 vue如何自定义封装API组件

自定义封装API组件

1.创建vue组件
2.创建Alter.js生成组件
3.导入Vue

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

子组件
父组件

自定义封装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