vue全局注册组件学习教程

已于 2022-01-29 14:37:02 修改
阅读量144 收藏
点赞数
分类专栏： vue 文章标签： vue.js 前端
于 2022-01-29 14:35:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57607714/article/details/122743257
版权

全局注册 所有的组件都可以用 把通用的文件写到全局注册里 不通用的文件写到局部注册里（比如在app.vue里导入

全局注册在main.js里注册

首先在components里新建一个文件 我这边新建的是card.vue文件

1.在main.js里引入

前面的card是 起的组件名 后面是组件本身card

2.在你需要展示的页面里 挂载上就可以了 我这里写在了app.vue根组件里

3.在子组件card里写上内容 测试跑一下 跑成功即可完成了

爬楼梯的小新
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习——VUE组件注册
Wby_Nju的博客
02-18 414
文章目录一 组件注册的方法1.1 全局注册1.2 局部注册模块系统#疑问1. webpack 是什么？ 一 组件注册的方法 1.1 全局注册 通过Vue.component方法进行组件的全局注册，方法的第一个参数为组件名，建议用-分割或驼峰法命名 Vue.component('my-component-name', { /* ... */ }) 全局注册的组件无论是否被使用，都会初始化。全局注册...
vue注册全局组件的方法
qq_33911541的博客
01-18 914
vue注册全局组件的方法
全局注册组件
Czy010506的博客
11-19 1863
vue.js
Vue3 全局注册组件和指令
最新发布
cnzzs的博客
08-06 692
一、app.component全局注册组件1.1、自定义一个组件登录后复制 <template> <div> <h2>hello, world!</h2> </div> </template> <script setup l...
注册全局组件
abc516835137的博客
08-27 109
理论 试列子，在utils下创建一个index.js文件 在需要引入的页面引入export和export default （三种方法） export导出的只能通过结构赋值的方式引入，优点是多次导出。 export default 只能导出一个模块。 ...
组件-全局注册
qq_40745468的博客
02-18 311
在上一节，我们将业务组件在 components 中进行注册，定义成了局部组件，这种方式能够满足我们的业务，但这种写法会导致公用的组件需要在多个组件中分别进行注册，造成代码冗余。我们可以把这个配置对象, 封装到src/components/index.js中, 导出此对象到main.js中给Vue.use使用。如果传入Vue.use()里是一个函数, 直接传入Vue构造器, 直接执行此函数。Vue.use 可以接收一个对象，Vue.use(obj)掌握 Vue.use() 的用法，能用它来注册全局组件。
使用use注册Vue全局组件和全局指令的方法
08-27
Vue官方文档推荐使用`Vue.component()`方法来注册全局组件，但当需要注册大量组件时，这种方法会导致主文件过于庞大。通过`Vue.use()`，我们可以创建一个专门存放组件的插件文件，然后在主文件中导入并使用。 步骤...
VUE注册全局组件和局部组件过程解析
10-16
全局组件是指在整个Vue应用中都可以直接使用的组件，它不需要在父组件或模板中额外注册。而局部组件，则仅限于在注册它的组件内使用。 ### 全局组件的注册过程 全局组件注册主要包含三个步骤： 1. 创建组件文件：...
Vue 全局loading组件实例详解
08-27
Vue 全局loading组件实例详解 本文主要介绍了 Vue 全局loading组件的实例详解，旨在帮助开发者快速了解和掌握该组件的使用方法和实现原理。 一、组件的安装和卸载 在 loading.js 文件中，我们可以看到 Loading ...
Vue组件全局注册实现警告框的实例详解
08-27
Vue组件全局注册实现警告框的实例详解 本文主要介绍了Vue组件全局注册实现警告框的实例，并对组件的创建和注册进行了详细的解释。下面是相关知识点的总结： 一、 Vue组件的创建和注册 Vue组件的创建和注册可以...
VUE组件全局注册
weixin_43579154的博客
02-16 519
VUE组件全局注册 1.准备一个需要注册全局的组件文件。 2.创建一个util包 3.utile包创建 globalComponents.js 内容: //引入需要注册的全局组件 import notices from '../components/notices.vue' function plugins (Vue) { //注册 Vue.component('notices',notices); //第一个参数:组件名称,第二个参数:要注册的组件 } export default plugi
注册为全局组件/元素
weixin_33878457的博客
09-04 141
main.js: import { Notification } from 'xxx'; Vue.prototype.$notify = Notification; 复制代码 vue页面： this.$notify 复制代码 main.js: import eChart from 'xxx'; Vue.component('eChart', eChart); 复制代码 vue页面： <e-...
每日小知识(Vue篇) --- 全局注册组件
weixin_45663697的博客
11-12 540
前言 通常我们要实现这样一个功能：在App.vue中使用<h-button></h-button> App.vue <template> <div id="app"> <h-button></h-button> </div> </template> 就需要在App.vue中通过import引入h-button的文件路径，在使用components注册这个组件。 <script>
vue 注册全局组件
Y_Tiam的博客
04-04 79
1、在components文件夹下新建package文件夹 （文件夹可以随意命名），然后在package文件夹下创建index.js 在index.js中写入如下代码 import Vue from ‘vue’ // 引入vue // 第一个参数表示从哪个文件夹开始匹配 这里表示从当前文件夹开始 // 第二个参数表示是否匹配子文件夹中的内容 // 第三个参数表示要匹配的文件的类型 这里匹配vue文件 const componentsContext = require.context(’.’, true,
Vue 注册全局组件
逆风优雅的博客
11-24 235
其次：写一个js 文件，将我们写好的组件引入。然后再main.js 中引入并使用。使用：直接在页面中使用。
注册全局组件方式
a476613958的博客
04-13 171
注册全局组件方式 * 注册全局组件方式: 注册： import GoodsList from "@/components/GoodsList"; Vue.component('GoodsList',GoodsList) 引用： <GoodsList/>
组件-全局/局部注册
weixin_52512511的博客
07-09 351
例如：div span a article footer header section ... 原生标签。在vue实例管理的视图中#app，把 组件名字 当中一个标签来使用，组件的名字不能用原生的标签来命名。含义：仅仅在注册组件的当前vue实例管理的视图中才可以使用。含义：在任何vue实例下到可以使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值