文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue封装通过API调用的组件的方法详解

2022-12-26 12:02

关注

前言

在前端开发中,关于Vue的使用相比大家并不陌生,而且Vue框架的优势也是其他框架所不能比的,尤其是Vue的封装思想更是堪称一绝,还有就是组件化的运用实践过程也是亮点。所以关于Vue框架的使用想必看官都不陌生,而且常用的核心技术点就那么点,本文就来分享一下关于通过Vue封装API调用组件的使用,记录一下,方便后期查阅使用。

封装通过API调用的组件的设计思路

其实通过封装成API调用的组件设计思路就是单例模式的思路,通过单例思维可以让整个项目通用封装的唯一组件,可以达到拿来即用的效果,具体还是得根据实际的业务需求来确定,比如需要被公用且多个模块共同使用同一个数据源的情况;再比如实际业务场景中的一个自定义图标的弹窗组件,由于在多个地方都会使用到这个弹框组件,这就需要搞成公共组件来使用。

封装组件的方式

在实际Vue开发过程中,一般有两种封装Vue组件的方法:第一种就是常用的通过父组件props传值给子组件、子组件$emit回传值给父组件的方法;第二种就是通过调用API调用的组件的形式来使用。

单例模式定义

单例模式(Singleton),也叫单子模式,在软件开发中是一种常用的软件设计模式。在实际应用该模式的时候,单例对象的类必须保证只有一个实例存在,因为在很多时候整个项目中只需要拥有一个全局对象,这样有利于协调项目整体的行为,这种方式简化了在复杂环境下的配置管理。

单例模式的优缺点

1、优点

2、缺点

单例模式适用场景

单例模式只允许创建一个实例对象,因此节省内存,提高对象的访问速度,所以对象需要被公用的场合使用,如多个模块使用同一个数据源连接对象。

使用API调用组件的示例

在实际开发中,关于使用API调用的组件的使用场景很多,这里只介绍几个常用的示例,方便参考使用。

示例一:封装一个自定义图标的弹框组件,然后通过使用API调用该组件

//1、封装自定义图标的弹框组件
<template>
<div id="tipPopup">
<div class="tipWrap">< img :src="img"/>
<p>{{text}}</p ></div></div>
</template><script>
export default {
name:'tipPopup', data(){
return{
text:'' ,
img:'' ,
}
}
</script>
<style lang="less">
#tipPopup{
.tipsWrap{
position: absolute;
background:#fff;
top:50%;
left:40%;
width:100px;
height:100px;
border-radius:8px;
img{
position: absolute;
left:0.85rem;
top:0.4rem;
}
}
}
//2、在Vue文件的同一目录下新创建tipPopup.js文件
import vue from 'vue';
import tipPopup from './tipPopup.vue‘
const TipConstr = Vue.extend(tipPopup);
// 使用这个方法调用tipPopup组件
function showTip(options){
options = options | | {};
if( typeof options==='object'){
     options ={
text: options.text,
img: options.img
     }
}else{
    new Error(‘参数错误!')
}
// 实例化子组件
const tipInstence = new TipConstr({data:options});
let timer;
tipInstence.vm = tipInstence.$mount();
document.getElementById('app').appendChild(tipInstence.vm.$el);
timer=setTimeout(function(){
//3000毫秒后将组件移除
document.getElementById('app').removeChild(tipInstence.vm.$el);
clearTimeout(timer);
},3000)
export default showTip;
//3、具体的使用页面,调用的方法
openTip(){
    showTips({text:”提交成功”, img:success});
}

示例二:vue封装使用API调用组件

//1、封装实现vue组件模板
<template>
  <div>{{tipTitle}}</div>
</template>
<script>
export default {
data () {
  return {
    title:'test',
    duration: 2000,
  }
}
}
</script>
<style>
</style>
//2、封装API文件,在Vue文件的同一目录下新创建test.js文件
import vue from 'vue';
import tipPopup from './test.vue‘
const temp = Vue.extend(test)
const Message = function (option) {
const msg = new temp({
    data: option
  })
  let vm = msg.$mount();
  let el = vm.$el;
  document.body.appendChild(el)
  setTimeout(() => {
    document.body.removeChild(el)
    msg.$destroy()
    vm = null
  },vm.duration)
}
export default Message
//3、使用,在具体需要使用的文件调用,import引入test.js文件,就通过方法调用组件
import test from './test.js';
test({
  text: ‘111'
});

拓展:父子组件通信

父组件通过props给子组件传值的(组件中的数据有三种:data、props、computed)。

最后

通过本文关于Vue封装通过API调用的组件的方法的介绍,如果认真阅读并且实践示例,应该会很好的掌握这些知识点,尤其是以后再遇到封装组件的时候可以往这个方式上面来使用,因为通过调用API形式的组件是比较方便且专业的方式,这是一篇值得阅读的文章,尤其是对于封装使用还不是太熟练的开发者来说甚为重要,重要性就不在赘述。

到此这篇关于Vue封装通过API调用的组件的方法的文章就介绍到这了,更多相关Vue封装通过API调用组件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯