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

相关文章

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

中文分词jieba库的使用与实景应用(一)

知识星球:https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义: 精确模式(默认模式): 全模式: 搜索引擎模式: paddle 模式(基于深度学习的分词模式): 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取

使用SecondaryNameNode恢复NameNode的数据

1)需求: NameNode进程挂了并且存储的数据也丢失了,如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2)故障模拟 (1)kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 (2)删除NameNode存储的数据(/opt/module/hadoop-3.1.4/data/tmp/dfs/na

Hadoop数据压缩使用介绍

一、压缩原则 (1)运算密集型的Job,少用压缩 (2)IO密集型的Job,多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1)为了支持多种压缩/解压缩算法,Hadoop引入了编码/解码器 2)要在Hadoop中启用压缩,可以配置如下参数

Java进阶13讲__第12讲_1/2

多线程、线程池 1.  线程概念 1.1  什么是线程 1.2  线程的好处 2.   创建线程的三种方式 注意事项 2.1  继承Thread类 2.1.1 认识  2.1.2  编码实现  package cn.hdc.oop10.Thread;import org.slf4j.Logger;import org.slf4j.LoggerFactory

Makefile简明使用教程

文章目录 规则makefile文件的基本语法:加在命令前的特殊符号:.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具,常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

pdfmake生成pdf的使用

实际项目中有时会有根据填写的表单数据或者其他格式的数据,将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdfmake生成pdf文件 1.下载安装pdfmake第三方包 npm i pdfma

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合,内部除了存储元素外,还会存储一个score,存储在zset中的元素会按照score的大小升序排列,不同元素的score可以重复,score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]