vue使用install函数把组件做成插件方便全局调用(封装公用组件)

最新推荐文章于 2023-06-17 21:15:31 发布
最新推荐文章于 2023-06-17 21:15:31 发布
阅读量878 收藏 2
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zaoqinghuan/article/details/107031193
版权

在项目中，我们有时需要把自定义组件做成插件，方便全局使用。下面以弹框提示为例。
在这里插入图片描述
一、在components文件夹中新建alert.vue，用作弹框提示组件的样式，内容，功能。
在这里插入图片描述
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200629234915530.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3phb3FpbmdodWFu,size_16,color_FFFFFF,t_70在这里插入图片描述
二、在同级目录下建alert.js文件。这里是核心思想
在这里插入图片描述
三、页面使用。
在这里插入图片描述

前端对象
关注
专栏目录
vue公共组件封装及传值
admin12345671的博客
11-14 2328
插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制父组件拥有结构，子组件用slot占位作用域插槽是一种子传父传参的方式，解决了普通slot在parent中无法访问child数据的去问题；
使用vue.use创建公共组件
qq_46159864的博客
04-22 1761
使用vue-cli创建公共组件 在前端奋战了这么长时间,用惯了vant,elementUI等第三方的插件。今日突然心血来潮,就手动教大家封装一个公共组的组件，使你们也能够成为在npm上有库的人。本次组件以button按钮为例 1.初入山门 在开始前前，需要对Vue的全局组件和局部组件进行一些了解 全局组件和局部组件 局部组件 绝大多数vue项目就只有一个实例(new Vue()只运行一次)，即...
在vue中封装可复用的组件方法
11-26
本次封装的组件以toast组件为例 以前使用移动端ui插件时，通过一句代码比如 $.toast( ‘ 需要显示的内容 ‘ )，从而在页面上展示这段文字，并在一定时间后消失。 现在我们也尝试自己封装toast组件。 准备工作：vue-cli脚手架工程 先看一下涉及到的文件目录截图： 这次的封装主要涉及的文件是Toast.vue toast.js Hello.vue，主要思路如下： ① Toast.vue是我们要使用的toast组件； ② toast.js里面用Vue.extend()扩展一个组件构造器，然后通过实例化组件构造器，就可创造出可复用的组件。 最后在toast.js里面导出函数myT
vue封装函数组件
haodanzj的博客
01-07 487
用vue封装函数组件
Vue番外之封装函数
二木成林
03-11 699
在vue中自定义函数并进行调用： 首先创建一个js文件，并在里面写一个函数 其中fun是调用的对象，而resp是需要封装的函数的函数名名，resp(res, func)是两个参数，其中res是一个对象，而func是一个待调用的函数。 最后使用export default fun将该对象暴露出去，让其他得以访问。 接着就是在vue文件中引入 注意引入的路径，其中fun是调用的对象名。 接下来就是引用里面的函数：通过fun.resp()调用刚才封装的函数。 第一个参数是传入的res，第
Vue 组件封装
weixin_34284188的博客
06-16 5602
Vue 组件封装 项目中没有从零开始封装一个组件，本文记录一下 Vue 组件封装的基本实践和一些组件的相关知识。主要涉及以下知识点： 封装一个组件的代码组织形式； vue 组件的三大核心： 属性（props、data）; 事件 插槽 样式 其他一些杂项 $nextTick 函数的使用 获取 DOM 元素及在父级组件中执行子组件方法 使用第三方计数库 countup.js 创建一个 ...
vue的封装功能函数和封装功能组件
CSDNhaoheng的博客
12-17 540
1.封装功能函数 1） 功能点明确 2） 函数内部应该保留固定代码(静态的) 3）将动态的数据抽取成形参，由使用者根据自身的情况动态的传入实参 4）一个良好的功能函数应该设置形参的默认值(ES6的形参默认值) 2. 封装功能组件 1）功能点明确 2）组件内部保留静态的代码 3）将动态的数据抽取成props参数，由使用者根据自身的情况以标签属性的形式动态传入props数据 4）一个良好的组件应该设置组件的必要性及数据类型props: { msg: { required: true, default: 默认值，
vue中Axios的封装与API接口的管理详解
10-18
`api.js`文件则负责定义所有的API接口，将每个接口封装成单独的函数，这些函数调用封装好的Axios实例，以简化调用接口的代码。例如： ```javascript // api.js export function getUserInfo() { return http.get('...
vue导出Excel表格全局函数（简洁明了）
szh1127249432的博客
04-26 1359
vue导出excel全局函数（简洁明了） 将导出到Excel功能封装成一个公用js函数，供其他vue页面复用。 1.安装Excel插件 npm install --save xlsx file-saver 2.编写公用js函数 htmlToExcel.js 代码如下： import FileSaver from 'file-saver'; import XLSX from 'xlsx'...
Vue3.2 电商前台项目（三）—— Home页面和Search页面（axios的封装、分页器的封装）
ailsa_csdn的博客
03-26 2592
vue3.2电商前台项目（三）：axios的封装、swiper轮播图的使用、排序的处理、分页组件的封装，全局组件的注册等知识的熟悉
基于Vue封装的一些工具
08-10
tools 工具函数 v-debounce 防抖指令 移动端横屏提示
Vue封装的可编辑表格插件方法
10-18
今天小编就为大家分享一篇Vue封装的可编辑表格插件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue3 Hooks函数使用及封装思想
最新发布
^_^
06-17 1万+
专业解释：Vue 3中的Hooks函数是一种用于在组件中共享可复用逻辑的方式。大白话：将单独功能的js代码抽离出来， 加工成公共函数，从而达到逻辑复用。对Vue社区调研，了解了许多使用Vue的开发者对于更好的组件逻辑组织方式的期望。对React Hooks和其他前端框架的解决方案进行了学习和借鉴。有了composition API 意味着我们就可以自定义封装hooks，最终的目的都是进行复用，在Vue2中复用的方式大部分都是采取的mixin，但相比hooks,hooks更清楚复用的功能来源及功能。
封装具体案例
qq_33911541的博客
01-31 874
封装案例
vue中install方法
热门推荐
weixin_44795287的博客
02-20 2万+
vue提供install可供我们开发新的插件及全局注册组件等 install方法第一个参数是vue的构造器，第二个参数是可选的选项对象 export default { install(Vue,option){ 组件 指令 混入 挂载vue原型 } } 全局注册组件 import PageTools from '@/components/PageTools/pageTools.vue' import update from './update/index.vue' import Ima
vue 如何把封装的组件以install 的方式提供给组员
qq_40259123的博客
03-25 1774
1. 创建packages文件夹（与src同级） 2. 把组件我们封装的组件移入到packages文件夹里面，并在文件内创建index.js 文件 由于我这边有icon 样式，所以把样式表也要放进去 3.在packages文件下index.js文件中对封装组件进行注册。 // 统一导出 // 导入颜色选择器组件 import Button from './button' import Dialog from './dialog' //导入字体图标 import './fonts/font.scss'
VUE封装插件--node-modules
qq_40042861的博客
06-13 4399
一、初始化项目：vue init webpack-simple "项目名" 删除src中除了main.js和app.vue外的文件，清空app.vue中无用内容-----在src文件夹下新建一个lib文件夹（包含插件名.vue和index.js) 1 .vue文件中写入插件内容逻辑 二、更改配置文件—index.js import centriole from ‘./centriole.vue...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值