iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >vue怎么自定义封装API组件
  • 888
分享到

vue怎么自定义封装API组件

2023-06-29 18:06:22 888人浏览 薄情痞子
摘要

这篇文章主要介绍Vue怎么自定义封装api组件,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!自定义封装API组件1.创建vue组件<template>    <

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

自定义封装API组件

1.创建vue组件

<template>    <div >        <div class="alert">        <div class="alert-main" v-for="item in notices" :key="item.name">            <div class="alert-content">{{ item.content }}</div>        </div>    </div>    </div ></template>
<script>   //多个提示框命名    let seed = 0;    function getUuid() {        return 'alert_' + (seed++);    }    export default {        data() {            return {                notices: []//多个提示框保存至数组            }        },        methods:{          add(notice) {                const name = getUuid();//获取当前提示框名称                //Object.assign 浅拷贝不会跳过那些值为 [null] 或 [undefined]的源对象                // Object.assign(target, ...sources);target: 目标对象,sources:源对象                let _notice = Object.assign({                    name: name                }, notice);                //将当前提示框标签保存到notices                this.notices.push(_notice);                // 定时移除,单位:秒                const time= notice.time|| 1.5;                //1.5s后调用移除方法                setTimeout(() => {                    this.remove(name);                }, time* 1000);           },          remove(name) {                const notices = this.notices;                for (let i = 0; i < notices.length; i++) {                    if (notices[i].name === name) {                        this.notices.splice(i, 1);                        break;                    }                }            }         }    }</script>
<style lang="sCSS"></style>

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父组件传值给子组件的方法:

子组件

vue怎么自定义封装API组件

父组件

vue怎么自定义封装API组件

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

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

vue怎么自定义封装API组件

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

vue怎么自定义封装API组件

页面中调用方法:

vue怎么自定义封装API组件

以上是“vue怎么自定义封装API组件”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网精选频道!

--结束END--

本文标题: vue怎么自定义封装API组件

本文链接: https://www.lsjlt.com/news/326080.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • C++ 生态系统中流行库和框架的贡献指南
    作为 c++++ 开发人员,通过遵循以下步骤即可为流行库和框架做出贡献:选择一个项目并熟悉其代码库。在 issue 跟踪器中寻找适合初学者的问题。创建一个新分支,实现修复并添加测试。提交...
    99+
    2024-05-15
    框架 c++ 流行库 git
  • C++ 生态系统中流行库和框架的社区支持情况
    c++++生态系统中流行库和框架的社区支持情况:boost:活跃的社区提供广泛的文档、教程和讨论区,确保持续的维护和更新。qt:庞大的社区提供丰富的文档、示例和论坛,积极参与开发和维护。...
    99+
    2024-05-15
    生态系统 社区支持 c++ overflow 标准库
  • c++中if elseif使用规则
    c++ 中 if-else if 语句的使用规则为:语法:if (条件1) { // 执行代码块 1} else if (条件 2) { // 执行代码块 2}// ...else ...
    99+
    2024-05-15
    c++
  • c++中的继承怎么写
    继承是一种允许类从现有类派生并访问其成员的强大机制。在 c++ 中,继承类型包括:单继承:一个子类从一个基类继承。多继承:一个子类从多个基类继承。层次继承:多个子类从同一个基类继承。多层...
    99+
    2024-05-15
    c++
  • c++中如何使用类和对象掌握目标
    在 c++ 中创建类和对象:使用 class 关键字定义类,包含数据成员和方法。使用对象名称和类名称创建对象。访问权限包括:公有、受保护和私有。数据成员是类的变量,每个对象拥有自己的副本...
    99+
    2024-05-15
    c++
  • c++中优先级是什么意思
    c++ 中的优先级规则:优先级高的操作符先执行,相同优先级的从左到右执行,括号可改变执行顺序。操作符优先级表包含从最高到最低的优先级列表,其中赋值运算符具有最低优先级。通过了解优先级,可...
    99+
    2024-05-15
    c++
  • c++中a+是什么意思
    c++ 中的 a+ 运算符表示自增运算符,用于将变量递增 1 并将结果存储在同一变量中。语法为 a++,用法包括循环和计数器。它可与后置递增运算符 ++a 交换使用,后者在表达式求值后递...
    99+
    2024-05-15
    c++
  • c++中a.b什么意思
    c++kquote>“a.b”表示对象“a”的成员“b”,用于访问对象成员,可用“对象名.成员名”的语法。它还可以用于访问嵌套成员,如“对象名.嵌套成员名.成员名”的语法。 c++...
    99+
    2024-05-15
    c++
  • C++ 并发编程库的优缺点
    c++++ 提供了多种并发编程库,满足不同场景下的需求。线程库 (std::thread) 易于使用但开销大;异步库 (std::async) 可异步执行任务,但 api 复杂;协程库 ...
    99+
    2024-05-15
    c++ 并发编程
  • 如何在 Golang 中备份数据库?
    在 golang 中备份数据库对于保护数据至关重要。可以使用标准库中的 database/sql 包,或第三方包如 github.com/go-sql-driver/mysql。具体步骤...
    99+
    2024-05-15
    golang 数据库备份 mysql git 标准库
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作