Chapter 13 普通组件的注册使用

2024-09-08 10:12

本文主要是介绍Chapter 13 普通组件的注册使用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

欢迎大家订阅【Vue2+Vue3】入门到实践 专栏,开启你的 Vue 学习之旅!

文章目录

  • 前言
  • 一、组件创建
  • 二、局部注册
  • 三、全局注册


前言

在 Vue.js 中,组件是构建应用程序的基本单元。本章详细讲解了注册和使用 Vue 的普通组件的两种方式:局部注册和全局注册。


本篇文章参考黑马程序员

一、组件创建

①定义
Vue 组件是一种具有特定功能的 Vue 实例,可以将 HTML、CSS 和 JavaScript 逻辑封装到一个文件中。组件的使用可以帮我们将复杂的应用拆分成更小、更易于管理的部分。

②组成
Vue 组件通常由一个 .vue 文件组成,该文件包含以下三部分:

  • <template>:定义组件的 HTML 模板。
  • <script>:定义组件的 JavaScript 逻辑。
  • <style>:定义组件的 CSS 样式。

③注册类别

  • 局部注册:只能在注册的组件内使用
  • 全局注册:所有组件内都能使用

④注册方式

  • 创建 .vue 文件 (三个组成部分)
  • 在使用的组件内导入并注册

⑤创建 .vue 文件快捷方式

在这里插入图片描述
在这里插入图片描述

二、局部注册

①定义
局部注册是指将组件仅在特定的父组件中进行注册,使得只有该父组件及其子组件可以使用这个组件。

②优点

  • 组件只在注册它的父组件范围内可用,不会影响全局命名空间
  • 便于管理和维护,减少全局命名冲突的风险

③步骤
a. 创建组件:创建.vue组件 (单文件组件)
b. 导入组件:在父组件中导入子组件。

import MyComponent from './MyComponent.vue';

c. 注册组件:在父组件的 components 选项中注册子组件。

components:{'组件名': 组件对象}

【注意】
组件名命名需符合大驼峰命名法,如HmHeader。

d. 使用组件:将组件名当成html标签使用,在父组件的模板中使用子组件。

<组件名></组件名>

【Tips】
快速使用组件的方法:
输入组件名+Tab键
如果生成失败,可能是因为 vscode 配置问题,解决方法如下:
在这里插入图片描述
在这里插入图片描述

【案例】
运用所学知识实现以下页面效果:
在这里插入图片描述
该案例的项目组织结构:
在这里插入图片描述

HmHeader.vue文件:

<template><div class="hm-header">我是hm-header</div>
</template><script>
export default {}
</script><style>
.hm-header{height:100px;line-height: 100px;text-align: center;font-size: 30px;background-color: purple;color:white
}
</style>

HmMain.vue文件:

<template><div class="hm-main">我是hm-main</div>
</template><script>
export default {}
</script><style>
.hm-main{height:400px;line-height: 100px;text-align: center;font-size: 30px;background-color: #f79646;color:white;margin:20px 0
}
</style>

HmFooter.vue文件:

<template><div class="hm-footer">我是hm-footer</div>
</template><script>
export default {}
</script><style>
.hm-footer{height:100px;line-height: 100px;text-align: center;font-size: 30px;background-color: blue;color:white
}
</style>

App.vue文件:

<template><!-- 使用注册的组件 --><div class="App"><!-- 头部组件 --><HmHeader></HmHeader><!-- 主体组件 --><HmMain></HmMain><!-- 底部组件 --><HmFooter></HmFooter></div>
</template><script>
// 导入需要注册的组件
import HmHeader from './components/HmHeader.vue'
import HmMain from './components/HmMain.vue'
import HmFooter from './components/HmFooter.vue'export default {// 局部注册// components 是一个 Vue 组件选项,用于声明当前组件依赖的子组件components:{/* '组件名': 组件对象在 JavaScript 对象字面量中,如果键和值的变量名相同,可使用简写语法。即 HmHeader: HmHeader 可以简写为 HmHeader*/HmHeader:HmHeader, // 完整写法HmMain,            // 简写HmFooter           // 简写}
}
</script><style>
.App{width:600px;height:700px;background-color: #87ceeb;margin:0 auto;}</style>

快捷键Ctril+Shift+'打开终端,输入npm run serve 命令并回车,启动开发服务器。
在这里插入图片描述
运行结果:
在这里插入图片描述

三、全局注册

①定义
全局注册是指将组件注册到 Vue 实例的全局范围内,使得在应用的任何地方都可以使用这个组件。

②优点

  • 组件可以在应用的任何地方使用,无需再次注册
  • 对于应用中需要频繁使用的组件,使用全局注册可以减少重复的注册代码

③步骤
a. 创建组件:创建.vue组件 (单文件组件)
b. 导入组件:在项目的入口文件(如 main.js)中导入组件。

import MyComponent from './MyComponent.vue';

c. 注册组件:使用 Vue.component 方法注册组件。

Vue.component(组件名,组件对象)

【注意】
组件名命名需符合大驼峰命名法,如HmHeader。

d. 使用组件:将组件名当成html标签使用。

<组件名></组件名>

【案例】
基于前面局部注册的案例全局注册一个“通用按钮”,实现以下页面效果:
在这里插入图片描述

项目组织结构:
在这里插入图片描述
HmButton.vue文件:

<template><button class="hm-button">通用按钮</button>
</template><script>
export default {}
</script><style>
.hm-button{height:50px;line-height:45px;padding:0 20px;background-color: green;border-radius: 5px;color: white;border: none;vertical-align: middle;
}
</style>

main.js文件:

// 文件核心作用:导入App.vue,基于 App.vue 创建结构渲染index.html
import Vue from 'vue'
import App from './App.vue'
// 编写导入的代码
import HmButton from './components/HmButton.vue'Vue.config.productionTip = false// 进行全局注册
// Vue.component(组件名,组件对象)
Vue.component('HmButton',HmButton)// Vue实例化,提供render方法 → 基于 App.vue 创建结构渲染index.html
new Vue({render: h => h(App),
}).$mount('#app')

在HmHeader.vue、HmMain.vue、HmFooter.vue文件中使用<HmButton>标签。
在这里插入图片描述

快捷键Ctril+Shift+'打开终端,输入npm run serve 命令并回车,启动开发服务器。

运行结果:
在这里插入图片描述

这篇关于Chapter 13 普通组件的注册使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1147824

相关文章

SpringBoot线程池配置使用示例详解

《SpringBoot线程池配置使用示例详解》SpringBoot集成@Async注解,支持线程池参数配置(核心数、队列容量、拒绝策略等)及生命周期管理,结合监控与任务装饰器,提升异步处理效率与系统... 目录一、核心特性二、添加依赖三、参数详解四、配置线程池五、应用实践代码说明拒绝策略(Rejected

C++ Log4cpp跨平台日志库的使用小结

《C++Log4cpp跨平台日志库的使用小结》Log4cpp是c++类库,本文详细介绍了C++日志库log4cpp的使用方法,及设置日志输出格式和优先级,具有一定的参考价值,感兴趣的可以了解一下... 目录一、介绍1. log4cpp的日志方式2.设置日志输出的格式3. 设置日志的输出优先级二、Window

Ubuntu如何分配​​未使用的空间

《Ubuntu如何分配​​未使用的空间》Ubuntu磁盘空间不足,实际未分配空间8.2G因LVM卷组名称格式差异(双破折号误写)导致无法扩展,确认正确卷组名后,使用lvextend和resize2fs... 目录1:原因2:操作3:报错5:解决问题:确认卷组名称​6:再次操作7:验证扩展是否成功8:问题已解

Qt使用QSqlDatabase连接MySQL实现增删改查功能

《Qt使用QSqlDatabase连接MySQL实现增删改查功能》这篇文章主要为大家详细介绍了Qt如何使用QSqlDatabase连接MySQL实现增删改查功能,文中的示例代码讲解详细,感兴趣的小伙伴... 目录一、创建数据表二、连接mysql数据库三、封装成一个完整的轻量级 ORM 风格类3.1 表结构

一文详解SpringBoot中控制器的动态注册与卸载

《一文详解SpringBoot中控制器的动态注册与卸载》在项目开发中,通过动态注册和卸载控制器功能,可以根据业务场景和项目需要实现功能的动态增加、删除,提高系统的灵活性和可扩展性,下面我们就来看看Sp... 目录项目结构1. 创建 Spring Boot 启动类2. 创建一个测试控制器3. 创建动态控制器注

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

Python使用vllm处理多模态数据的预处理技巧

《Python使用vllm处理多模态数据的预处理技巧》本文深入探讨了在Python环境下使用vLLM处理多模态数据的预处理技巧,我们将从基础概念出发,详细讲解文本、图像、音频等多模态数据的预处理方法,... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

Conda与Python venv虚拟环境的区别与使用方法详解

《Conda与Pythonvenv虚拟环境的区别与使用方法详解》随着Python社区的成长,虚拟环境的概念和技术也在不断发展,:本文主要介绍Conda与Pythonvenv虚拟环境的区别与使用... 目录前言一、Conda 与 python venv 的核心区别1. Conda 的特点2. Python v

Spring Boot中WebSocket常用使用方法详解

《SpringBoot中WebSocket常用使用方法详解》本文从WebSocket的基础概念出发,详细介绍了SpringBoot集成WebSocket的步骤,并重点讲解了常用的使用方法,包括简单消... 目录一、WebSocket基础概念1.1 什么是WebSocket1.2 WebSocket与HTTP