网站首页 > 教程文章 正文
组件的注册方式
一个Vue组件在使用前需要先被“注册”,这样Vue才能在渲染模板时找到其对应的实现。组件注册有两种方式:全局注册和局部注册
- 全局注册
main.js
import {createApp} from'vue'
import App from'./App.vue'
import Globalcomponent from "./components/Globalcomponent.vue"
const app = createApp(App);
app.component("GlobalComponent",GlobalComponent)
app.mount('#app');
xx.vue
<template>
<h3>全局应用组件</h3>
</template>
- 局部注册
全局注册虽然很方便,但有以下几个问题:
- 全局注册,但并没有被使用的组件无法在生产打包时被自动移除(也叫"tree-shaking”)。如果你全局注册了一个组件,即使它并没有被实际使用,它仍然会出现在打包后的JS文件中
- 全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时,不太容易定位子组件的实现。和使用过多的全局变量一样,这可能会影响应用长期的可维护性
局部注册需要使用components选项
猜你喜欢
- 2025-05-24 在vue3中动态加载远程组件
- 2025-05-24 Motion for Vue:为Vue量身定制的强大动画库
- 2025-05-24 前端流行框架Vue3教程:14. 组件传递Props效验
- 2025-05-24 高性能 vue.js+ztree 树形组件Vue-GiantTree
- 2025-05-24 vue浏览器不可不看的宝藏插件
- 2025-05-24 重磅推荐:一个基于 Vue 的 (大转盘/九宫格) 抽奖插件
- 2025-05-24 Vue父子组件,利用条件延迟创建子组件,达到参数传递目的
- 2025-05-24 最近很火的Vue Vine是如何实现一个文件中写多个组件
- 2025-05-24 VUE - 如何写一个简易版 vue-router 插件
- 2025-05-24 超好用 Vue.js 图片裁切组件Vue-ImgCutter
- 05-25干货 | 一步步部署 Flask 应用
- 05-25别再去找Docker命令了,你要的常用的全都在这
- 05-25如果您删除Windows11上的“Program Files”文件夹会发生什么?
- 05-25家用nas最常用的docker容器及部署方法
- 05-25你好 dotnet run file, 再见 csproj
- 05-25China committed to continuing contributions to global health: delegation
- 05-25Chinese, German experts urge cooperation during Eurasia relations seminar
- 05-25Peace of paramount importance for region
- 最近发表
-
- 干货 | 一步步部署 Flask 应用
- 别再去找Docker命令了,你要的常用的全都在这
- 如果您删除Windows11上的“Program Files”文件夹会发生什么?
- 家用nas最常用的docker容器及部署方法
- 你好 dotnet run file, 再见 csproj
- China committed to continuing contributions to global health: delegation
- Chinese, German experts urge cooperation during Eurasia relations seminar
- Peace of paramount importance for region
- after和in用法解析
- China's top diplomat to chair third China-Pacific Island countries foreign ministers' meeting
- 标签列表
-
- location.href (44)
- document.ready (36)
- git checkout -b (34)
- 跃点数 (35)
- 阿里云镜像地址 (33)
- qt qmessagebox (36)
- mybatis plus page (35)
- vue @scroll (38)
- 堆栈区别 (33)
- 什么是容器 (33)
- sha1 md5 (33)
- navicat导出数据 (34)
- 阿里云acp考试 (33)
- 阿里云 nacos (34)
- redhat官网下载镜像 (36)
- srs服务器 (33)
- pico开发者 (33)
- https的端口号 (34)
- vscode更改主题 (35)
- 阿里云资源池 (34)
- os.path.join (33)
- redis aof rdb 区别 (33)
- 302跳转 (33)
- http method (35)
- js array splice (33)