Vue实战-将通用组件注册为全局组件

最新推荐文章于 2024-08-09 09:48:25 发布
最新推荐文章于 2024-08-09 09:48:25 发布
阅读量251 收藏
点赞数 3
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33449977/article/details/136284980
版权

假设一个组件在很多个页面都要用到（比如头部组件，几乎每个页面都用到），我们就可以将它抽取为一个自定义组件，然后再将自定义进行全局注册，这样我们在任何组件都可以直接使用这个自定义组件了，写一次就可以使用无数次，很爽。

以我个人网站为例，这个头部组件几乎每个页面都要用到，那么就把它抽取为自定义组件，进行全局注册。如果你不这样做的话，那你每个页面都要重写一遍。

1、创建自定义组件

 

2、全局注册

在main.js 里面全局注册

3.使用组件

 效果：

成功抽取。。

周盛欢
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue脚手架-只是自己用
06-22
"vue脚手架-只是自己用"表明这是一个个人定制的Vue CLI配置，可能包含了开发者个人的工作流和习惯，但并未进行通用性的预配置。 在描述中提到“里面是自己使用的脚手架，未作任何配置，每次使用前需要进行环境配置...
vue-modal-mixin:用CodeSandbox创建
04-16
Vue.js 是一个流行的前端JavaScript框架，它以...通过学习和理解`vue-modal-mixin`，开发者可以更好地掌握Vue.js的实战技巧，尤其是如何构建可复用的UI组件，同时也能了解如何利用在线工具如CodeSandbox提升开发效率。
关于全局注册组件的三种方法
m0_56234487的博客
05-12 430
1：最传统的方法（基础用法） main.js中导入 Vue.component('组件名',导入的组件) 2：使用Vue.use方法（最常用） 创建一个js export default { install(Vue){ Vue.component('组件名',导入的组件) } } 在main.js导入注册 Vue.use(js) 3：全自动注册（本人暂时还未掌握） 自动读取文件夹内的vue组件，实现自动...
前端如何将自定义组件注册到全局
weixin_45439379的博客
07-01 613
前端如何将自定义组件注册到全局
Vue3注册全局组件
最是人间留不住，朱颜辞镜花辞树。
11-15 1万+
例如组件使用频率非常高，几乎每个页面都在使用便可以封装成全局组件。
整理自定义常用组件统一注册到vue全局的方法
weixin_42937737的博客
06-09 744
一，统一目录下封装好组件 二，统一到一个index.js文件中导出， import modal from '@cs/modal/' import vHead from '@cs/header/' // head const views = { modal, vHead, } const install = function(Vue){ Object.keys(views).forEa...
通用自定义组件注册到全局
Ma_lunan的博客
08-07 418
如果自己自定义的通用组件频繁被调用，又不想每次都引入注册一遍，那该怎么办？ 例如一个icon组件 <template> <div class="svg-icon-box"> <svg v-if="type==='del'" class="svg-del" width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" x
后台管理系统-使用Vue3+ElementPlus+Typescript开发的后台管理系统-优质项目实战.zip
02-18
ElementPlus是基于Vue2和Vue3的UI组件库，它是Element UI的升级版，专为Vue3设计。ElementPlus提供了丰富的可复用组件，如表格、按钮、表单、通知等，帮助开发者快速构建美观的用户界面。它还支持主题定制和国际化，...
SpringBoot+Vue 企业级 智能通用报表 调度平台 管理系统.zip
03-23
总的来说，这个“SpringBoot+Vue 企业级 智能通用报表 调度平台 管理系统”项目，不仅是一个实战练习平台，也是一个学习资源，帮助学生从理论到实践，全面提升软件开发能力。通过实际操作，学生可以深入理解Java后端...
Vue 全家桶实现移动端酷狗音乐功能
10-17
文件结构方面，`src/`目录包含了所有源代码，如`App.vue`作为主入口文件，`assets/`存放静态资源，`components/`下有各个功能组件，`router/`和`store/`分别负责路由和状态管理，`js/`和`css/`包含通用的脚本和样式...
vue 引入自定义js组件并全局注册自定义指令
wcdunf的博客
06-13 3279
main.js中引入 import './utils/directive.js'//路径改为自己的，这里不加from ,不use
vue.js组件的全局注册和局部注册详解
ma_hao99的博客
08-11 1万+
1全局注册实例(按照官网的例子下面是代码) &lt;div id="app"&gt; &lt;com-btn&gt;&lt;/com-btn&gt; &lt;com-btn&gt;&lt;/com-btn&gt; &lt;/div&gt; &lt;script&gt; Vue.component('com-btn',{
如何在项目里面优雅的全局注册组件？
weixin_34342992的博客
04-28 366
记一笔：项目中还在为各种繁杂的组件眼花缭乱？；如何减少维护的成本，就是本文中要讲到的。（vue中的实现） #常用的注册方式 import Button from './button' ... components:{ Button:Button, .... } ##这样是不是很麻烦？组件一多，不是很方便维护。 ...
Vue-注册全局组件的两种方法
热门推荐
crystal_iwwish的博客
12-22 2万+
第一种：在main.js中直接注册 // 引入 import PageTools from '@/components/PageTools' // 注册为全局组件 Vue.component('PageTools', PageTools) 缺点：如果我们需要注册的全局组件非常多，我们需要一个一个引入，然后分别调用Vue.component方法，main.js文件会变的很大，不好维护。 第二种：使用插件的形式注册 在统一注册的入口文件 中 // 引入 import PageTools from './Pa
vue自定义全局组件(自定义插件)
Tank_in_the_street的博客
06-12 2万+
vue自定义组件(自定义插件)能够提高你的代码的重用率，并且写一个有自己特色的组件。
前端已经学会vue，做粒子效果
wj0712的博客
08-08 365
这些学习内容将帮助你有效地实现粒子效果，并将其整合到你的 Vue 项目中。
vue的diff算法的【双端比较】策略
yiguoxiaohai的博客
08-08 211
vue的diff算法的双端比较策略
写一个Vue2和vue3的自定义指令（以复制指定作为示例）
最新发布
weixin_44784401的博客
08-09 496
写一个Vue2和vue3的自定义指令（以复制指定作为示例）
Vue3使用el-table实现多级表头合并列
weixin_72439307的博客
08-07 230
el-table多级表头合并列
vue-router怎么setup全局注册组件
05-23
可以在Vue的根实例中通过`Vue.component()`方法全局注册组件。而在Vue-Router中，我们可以在路由配置文件中使用`components`属性来定义全局组件。 以下是一个示例： ```js import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' import Home from './views/Home.vue' Vue.use(VueRouter) Vue.component('my-component', { template: '<div>This is my global component!</div>' }) const router = new VueRouter({ routes: [ { path: '/', name: 'home', component: Home } ] }) new Vue({ router, render: h => h(App) }).$mount('#app') ``` 在上面的示例中，我们使用`Vue.component()`方法全局注册了一个名为`my-component`的组件。然后，在路由配置中，我们将`Home`组件作为一个路由组件使用，并且可以在`Home`组件中直接使用`my-component`组件。 如果需要在多个路由组件中使用同一个组件，那么全局注册组件可以减少代码的重复，提高代码的复用性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

周盛欢

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值