封装全局的组件

最新推荐文章于 2023-06-30 10:50:21 发布
最新推荐文章于 2023-06-30 10:50:21 发布
阅读量307 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48816102/article/details/125238923
版权

vue.js 前端 javascript

在vue2中,当一个组件需要在多个组件内使用时,我们可以封装一个全局组件以供其他组件使用,这样可以避免封装很多组件以导致组件的泛滥

1.先在components里面封装一个index.js文件,然后在index.js文件里面导入组件,里面封装一个install函数,参数必填Vue,然后在函数里面定义声明组件 代码如下:

2.在main.js(入口文件)里面导入这个index.js文件,然后使用Vue.use()使用这个index.js 代码如下:

做好以上两点就可以在任意组件中直接使用这个全局组件PageTools了

滋滋俊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue - 全局弹框组件实现1
wwwqiaoling的博客
03-24 1074
想实现一个全局的弹窗组件Notice，以插件的形式使用，先来分析一波： 首先得有一个Notice的组件配置，也就是Notice.vue文件。 想把Notice这个组件挂载到body下，可以用render函数实现。 全局引用，就可以使用啦！ 首先，组件配置好写，就是一个框框组件配置，里面接受一些参数：弹框的主题title，弹框的展示的内容content，弹框的显示时间duration，再添加一些...
全局组件
xiaoxingxingzai的博客
08-28 998
全局组件 组件可以扩展 HTML 元素，封装可重用的代码。 组件是可复用的 Vue 实例，且带有一个名字。 1.创建步骤： 创建组件构造器 var myton=Vue.extend({ //data必须是个函数 data:function () { return{ count:...
两个封装好了的js组件，可以直接传参使用
09-02
两个封装好了的js组件（右键功能，搜索引擎），可以直接传参使用。
一个组件在多个页面的灵活应用：
m0_52518047的博客
04-01 313
一个组件在多个页面的灵活应用： 这是封装好的一个组件，它被应用到两个页面上，但是在应用的这两个页面上有些内容不一样，这个时候如何通过props来解决这个问题： （1）首先在组件页面给它的props绑定布尔值 谁需要做出判断，就把v-if的值帮给谁 el-button v-if="isShowAdd" size="mini" type="success" @click=" dialoguploadVisible = true">上传素材</el-button> <div class
手把手教你将vue公共组件封装到npm库并使用
最新发布
m0_53582519的博客
06-30 4783
封装npm包是一种良好的编程实践，可以提高代码的可重用性、可维护性和可读性，使得我们在开发过程中能够更加专注于业务逻辑的实现，而不是重复造轮子。
【uni-app】一个页面在其他页面中调用显示
Hiroomi的博客
10-28 704
写一个推荐页面recommend.vue预期在shop.vue和details.vue中显示。
vue 组件的三种使用方式教程
weixin_33787529的博客
03-20 372
在vue angular react三大前端框架的大前端时代。许多人选择了vue，在 github 上的star，vue已经超过react的数量了。虽然star并不能代表vue更强，不过在发展速度上看来，vue确实很快。 在模块化的前端时代，万物皆组件，vue学习组件是必不可少的。 可是在大多数人熟悉了纯html、jq之后，在初次接触vue的组件时候，却是满脸蒙蔽。 今天咱们以最简单的方式，...
Vue封装的组件全局注册并引用
12-03
当vue接触的多了之后，你可能也会到自己封装组件的程度，试想每个页面的功能级模块全部拆分成组件，然后后续请求后台数据传入进去或者自己模拟数据，是多么方便的一件事情。 每当我们需要修改的时候，只需维护那一个...
echarts的全局封装组件
06-01
里面的informationAnalysis组件为当前页面需要调用的组件，如果需要使用，直接引用进去，传入数据即可
el-tree==＞添加分级图标==＞添加引导线样式==＞点击节点展示全部父节点信息==＞使用$store封装全局组件
06-20
适用博客的资源： 【Vue项目实战7】【ElementUI样式优化】el-tree==＞添加分级图标==＞添加引导线样式==＞【node-click】点击节点展示全部父节点信息==＞使用$store封装全局组件使用
React实现全局组件的Toast轻提示效果
10-17
React 实现全局组件的 Toast 轻提示效果是构建用户界面时常见的需求，尤其是在需要向用户提供即时反馈的情况下。本文将详细介绍如何在 React 应用中创建一个可全局调用的 Toast 组件，以及如何实现其不同类型的提示...
vue组件的封装与使用
qq_38886284的博客
03-29 1156
组件是可复用的 Vue 实例，且带有一个名字。组件的封装和复用可以使我们在开发中极大的提高效率，使代码更加简洁，方便维护。1、在项目中通常把组件放在component文件夹中， 首先在component文件夹中新建一个vue页面，对用于整个项目组件的复用率不是很高的时候， 我们一般采用按需引用的放在，在要用到的页面引用组件。组件基础的使用就这些啦，下篇介绍父子组件之间的传值及函数调用....2、在要用组件的vue页面中进行组件的引用和注册。3、在vue页面中使用组件。
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 3969
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
教你如何封装功能组件和页面组件
weixin_67746880的博客
07-24 2348
如果你是学的vue框架，那么你是必须要进行组件的封装。不然当一个页面的代码过多的时候就令人看起来冗余，也容易产生一些变量的污染，让别人看起来显得不太专业话不多唠，开始上干货。
vue---axios
weixin_33695450的博客
09-27 99
2019独角兽企业重金招聘Python工程师标准>>> ...
Vue-封装一个通用的分页组件，并实现全局注册组件使用
服务员的博客
04-03 1133
分页无论是在网站和app中用到都很多，开发中经常要使用到，前端有时侯频繁用到分页的功能，每次用到要再次去实现，那么我们为了减少开发的复杂性，提高效率，是可以将它作为一个公共组件封装起来供各个页面来使用！，并注册一个全局组件。在父组件中(使用的页面)引入封装组件(子组件)并注册，然后在页面中使用，在父组件中给标签(注册的组件名)上绑定一个属性， 属性上挂载需要传递的值，通过 props 在子组件(封装文件)接收数据；在子组件中使用伏组件传递的方法，调用这个分页查询的方法，2、用到的传递的参数和方法。
封装一个uniapp的全局弹窗组件，vue中也可以使用，在任何页面都可以弹出
热门推荐
jsmeng626的博客
06-17 1万+
封装一个uniapp的全局弹窗组件，vue中也可以使用，在任何页面都可以弹出
如何封装一个全局 (公共) 组件?(必会)
大牛的博客
08-19 8146
目录 想要封装一个全局 (公共) 组件,首先必须知道哪三点? 如何封装? 第一步:创建文件 第二步:组件结构 (插槽?) 第三步:注册组件 1.普通写法:用Vue.component() 注册全局组件 2.优化后的写法:用Vue.use() 注册全局组件 第四步:使用 想要封装一个全局 (公共) 组件,首先必须知道哪三点? 一:为什么要定义成全局的组件? 因为在项目中要多次使用 ...
Vue3封装全局函数式组件
前端咸鱼翻身的博客
04-13 5995
Vue3函数式组件，Vue3编写插件
vue3 封装全局组件
06-06
要封装一个全局组件，需要遵循以下步骤： 1. 创建一个组件 Vue 文件，定义组件的模板、样式和行为。 2. 在 main.js 中导入组件，并且通过 Vue.component() 将组件注册为全局组件。 3. 在模板中使用组件。 下面是一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值