Vue3从零开始——带你轻松掌握组件的基本操作

news2024/9/20 18:54:03

文章目录

  • 1. Vue 组件的基础概念
    • 1.1 什么是组件？
    • 1.2 组件的作用
    • 1.3 组件的分类（全局组件 vs 局部组件）
  • 2. 创建和注册组件
    • 2.1 单文件组件（SFC）
    • 2.2 全局组件注册
    • 2.3 局部组件注册
  • 3. 组件命名格式
  • 4. ref获取DOM元素
    • 4.1 基本流程
    • 4.2 获取组件引用
  • 5. `ref`​ 操作组件 - `defineExpose`​
    • 5.1 `defineExpose`​ 的作用
    • 5.2 使用 `defineExpose`​ 暴露组件内部属性和方法
  • 5. 总结

在这里插入图片描述

1. Vue 组件的基础概念

下载 (14)

1.1 什么是组件？

组件是 Vue.js 中用于构建用户界面的独立、可复用的模块。组件允许开发者将应用程序的界面划分为多个独立的部分，每个部分对应一个功能或视图。这些部分可以独立开发、测试和维护，然后通过组合的方式构建复杂的界面。

组件的本质是一个带有 template​、script​ 和 style​ 的自包含模块：

  • ​template​​：定义了组件的结构和内容。
  • ​script​​：包含组件的逻辑，如数据、方法和生命周期钩子。
  • ​style​​：定义了组件的样式，可以使用 Scoped CSS 来确保样式仅作用于当前组件。

1.2 组件的作用

  • 模块化：组件将大规模的应用程序分解为小型、独立、可复用的模块，便于管理和维护。
  • 复用性：组件可以在不同的地方重复使用，避免代码冗余，提高开发效率。
  • 可维护性：组件的独立性使得它们更容易调试和更新，而不必担心影响到其他部分。

1.3 组件的分类（全局组件 vs 局部组件）

根据组件的注册方式，Vue 组件可以分为全局组件和局部组件。

全局组件：一旦注册为全局组件，可以在任何地方使用，而无需再次引入和注册。

示例：

import MyComponent from './MyComponent.vue';
app.component('MyComponent', MyComponent);

局部组件：仅在注册了该组件的父组件或页面中可用，通常用于更加局部化的功能需求。

示例：

<script setup>
import MyComponent from './MyComponent.vue';
</script>

<template>
  <MyComponent />
</template>

2. 创建和注册组件

2.1 单文件组件（SFC）

Vue 的单文件组件（SFC, Single File Component）是最常见的组件格式，将组件的模板、逻辑和样式整合在一个 .vue​ 文件中。SFC 提供了清晰的结构和高效的开发体验。

SFC 的基本结构：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('Hello, Vue!');
</script>

<style scoped>
p {
  color: blue;
}
</style>
  • ​<template>​ ​：定义组件的模板部分，描述了组件的结构和布局。
  • ​<script setup>​ ​：包含组件的逻辑部分，使用 Vue 的组合式 API 进行数据和方法的管理。
  • ​<style>​ ​：定义组件的样式，使用 scoped​ 属性确保样式仅作用于当前组件。

2.2 全局组件注册

全局组件可以在 Vue 应用中的任何地方使用。通常在应用的入口文件（如 main.js​ 或 main.ts​）中注册。

步骤 ：

  1. 创建一个全局组件：
<!-- GlobalComponent.vue -->
<template>
    <div>
        <h3>这是一个全局组件</h3>
    </div>
</template>

<script setup>
</script>

<style scoped>
h3 {
    color: red;
}
</style>
  1. 在应用入口文件中注册全局组件：
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');
  1. 在任何地方使用全局组件：
<!-- APP.vue -->
<template>
  <div>
    <h1>这是父组件</h1>
    <GlobalComponent></GlobalComponent>
  </div>
</template>

<script setup>
</script>

<style scoped></style>

效果：

image​

2.3 局部组件注册

局部组件注册意味着组件只能在注册它的父组件或页面中使用。局部组件注册通常在使用组合式 API 时通过 <script setup>​ 标签完成。

示例：

  1. 创建一个局部组件：
<!-- LocalComponent.vue -->
<template>
    <div>
        <h3>这是一个局部组件</h3>
    </div>
</template>

<script setup>
</script>

<style scoped>
h3 {
    color: green;
}
</style>
  1. 在父组件中注册和使用局部组件：
<!-- APP.vue -->
<template>
  <div>
    <h1>这是父组件</h1>
    <LocalComponent></LocalComponent>
  </div>
</template>

<script setup>
// 注册局部组件
import LocalComponent from './components/LocalComponent.vue';
</script>

效果：

image​

3. 组件命名格式

引用来源： Vue3——组件名格式

在整个指引中，我们都使用 PascalCase 作为组件名的注册格式，这是因为：

  1. PascalCase 是合法的 JavaScript 标识符。这使得在 JavaScript 中导入和注册组件都很容易，同时 IDE 也能提供较好的自动补全。
  2. <PascalCase />​ 在模板中更明显地表明了这是一个 Vue 组件，而不是原生 HTML 元素。同时也能够将 Vue 组件和自定义元素 (web components) 区分开来。

为了方便，Vue 支持将模板中使用 kebab-case 的标签解析为使用 PascalCase 注册的组件。这意味着一个以 MyComponent​ 为名注册的组件，在模板中可以通过 <MyComponent>​ 或 <my-component>​ 引用。这让我们能够使用同样的 JavaScript 组件注册代码来配合不同来源的模板。

比如之前的全局组件的使用就可以这样写：

<!-- APP.vue -->
<template>
  <div>
    <h1>这是父组件</h1>
    <!-- <GlobalComponent></GlobalComponent> -->
    <global-component></global-component>
  </div>
</template>

<script setup>
</script>

<style scoped></style>

4. ref获取DOM元素

在 Vue 3 中，使用 ref​ 可以将 DOM 元素引用存储到一个响应式变量中。与响应式数据不同，ref​ 在这里并不创建响应式数据，而是获取元素的引用，方便后续在逻辑中直接访问该元素。

4.1 基本流程

  1. 创建 ​一个 ref​变量 来存放该元素的引用。
  2. 在模板中声明 ref​ 属性。
  3. 操作 DOM 元素。
<template>
  <!-- 2. 在模板中声明刚才 ref 属性，注意要与刚才定义的 ref 变量名称相同 -->
  <div ref="myDiv">这是一个需要获取的 div 元素</div>
  <button @click="change">改变样式</button>
</template>

<script setup>
import { ref, onMounted } from 'vue';
// 1. 创建一个 ref 变量来存储 div 元素引用
const myDiv = ref(null);

function change() {
  // 3. 使用 ref 变量来获取 div 元素，操作 DOM
  // 设置背景色
  myDiv.value.style.backgroundColor = 'lightblue';
  // 设置文本
  myDiv.value.innerHTML = 'Hello, Vue 3!';

}
</script>

效果：

recording​

4.2 获取组件引用

同样的，组件也可以通过这种方式获取引用：

<script setup>
import { ref, onMounted } from 'vue'
import Child from './Child.vue'

const child = ref(null)

onMounted(() => {
  // child.value 是 <Child /> 组件的实例
})
</script>

<template>
  <Child ref="child" />
</template>

5. ref​ 操作组件 - defineExpose​

如果想要在父组件中访问子组件的某些特定属性或方法，单靠 ref​ 是不够的。这时候，我们需要使用 defineExpose​ 来显式暴露子组件的属性或方法。

5.1 defineExpose​ 的作用

defineExpose​ 是 Vue 3 提供的一个新的组合式 API 工具，用于显式暴露组件内部的属性或方法。在默认情况下，组合式 API 中的状态或方法不会自动暴露给父组件，而使用 defineExpose​ 可以选择性地暴露这些内部内容，使其可以被父组件访问。

5.2 使用 defineExpose​ 暴露组件内部属性和方法

示例：

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>子组件内容</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 1. 定义内部属性和方法
const internalState = ref('这是子组件的状态');
function internalMethod() {
  console.log('子组件方法被调用');
}

// 2. 使用 defineExpose 暴露属性和方法
defineExpose({
  internalState,
  internalMethod,
});
</script>

<!-- ParentComponent.vue -->
<template>
    <div>
        <ChildComponent ref="childRef" />
        <button @click="useChildMethod">调用子组件方法</button>
        <p>子组件状态: {{ childState }}</p>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import ChildComponent from './ChildComponent.vue';

const childRef = ref(null);
const childState = ref(null);
// 3. 调用子组件方法
function useChildMethod() {
    if (childRef.value) {
        childRef.value.internalMethod();
    }
}
// 监听子组件状态的变化
watch(childRef, (newVal) => {
    if (newVal) {
        childState.value = newVal.internalState;
    }
});
</script>

代码解释：

  • 在子组件中：

    • internalState​ 是子组件的内部状态，internalMethod​ 是子组件的方法。
    • 使用 defineExpose​ 将 internalState​ 和 internalMethod​ 显式暴露给父组件。

  • 在父组件中：

    • 通过 ref​ 获取子组件实例 childRef​，然后通过 childRef.value.internalMethod()​ 调用子组件的方法。
    • 使用 watch​ 监听 childRef​ 的变化，并通过 newVal.internalState​ 访问子组件的暴露状态。

image-20240815200313687

5. 总结

通过本文，我们简单讲解了Vue中组件的基本概念、作用以及最基本的使用，除此之外还讲解了如何获取DOM元素的引用和暴露子组件数据和方法，然而组件还有更多进阶知识，比如如何绑定子组件监听事件、组件通信等等知识，后面的知识我们在之后的博客进行讲解，希望对大家有所帮助☺️。

‍

参考文章：

Vue3文档

‍

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2042711.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

CSC7225、CSC7224 双绕组24瓦芯片

CSC7225、CSC7224 双绕组24瓦芯片

CSC7225、CSC7224为高性能电流模式 PWM 开关电源控制器&#xff0c;满足绿色环保标准&#xff1b;CSC7225、CSC7224广泛适用于经济型开关电源&#xff0c;如 DVD、机顶盒、传真机、打印机、LCD 显示器等。CSC7225、CSC7224采用 DIP-8 封装。应用原理如下图&#xff1a; CSC7225…
阅读更多...
目前最流行的前端构建工具，你知道几个？

目前最流行的前端构建工具，你知道几个？

现在的市面上有很多不同的前端构建工具&#xff0c;我们很难对它们一一进行关注。在本文中&#xff0c;我们将重点介绍最受欢迎的几种&#xff0c;并探讨开发人员喜欢或不喜欢它们的原因。 Webpack Webpack 是一个模块打包器&#xff0c;主要用于处理 Web 应用程序的资源的优化…
阅读更多...
Kali 2024 逆向调试 GDB 13.2 安装插件 Peda 不兼容报错解决方案

Kali 2024 逆向调试 GDB 13.2 安装插件 Peda 不兼容报错解决方案

发现问题 如果你尝试直接进行$ apt install gdb安装后应该是最新版的gdb 13.2。并且尝试安装peda后将会出现from six.moves import range报错 2024版的kali的python3是python3.11版本&#xff0c;而peda中的six库支持的是3.11之前的。而gdb13是支持python3.12的。 有趣的一点…
阅读更多...
EDAS（企业级应用服务）

EDAS（企业级应用服务）

1 :介绍 1&#xff1a;edas 提供了应用&#xff0c;开发&#xff0c;部署&#xff0c;监控&#xff0c;运维。同时支持 spring cloud, dubbo ,HSF 2:Ali-Tomcat 基于tomcat改造的Servlet容器。支持原有功能&#xff0c;它在启动时会自动加载Pandora&#xff08;潘多拉&#x…
阅读更多...
Java面试八股之简述消息队列P2P模型

Java面试八股之简述消息队列P2P模型

简述消息队列P2P模型 P2P模型组件 生产者(Producer)&#xff1a;生产者是创建并发送消息的实体。它可以是一个应用程序、服务或任何产生数据的系统组件。 队列(Queue)&#xff1a;队列是存储消息的数据结构。在P2P模型中&#xff0c;队列扮演着中间存储的角色&#xff0c;负…
阅读更多...
[二次元]个人主页搭建

[二次元]个人主页搭建

文章目录 域名买一个免费的 框架HexoHexo-Theme-ParticleX Halo 参考 域名 买一个 有钱人玩这个 免费的 github.io 教程在github官方文档有&#xff1b; 框架 Hexo 静态的 Hexo-Theme-ParticleX Argvchsの小窝 Halo 动态的 halo 参考 基于Hexo框架的GitHub个人主页…
阅读更多...
推荐一个优秀的 .NET MAUI 组件库

推荐一个优秀的 .NET MAUI 组件库

目录 前言 组件介绍 组件展示 布局 按钮 复选框 进度条 导航栏 组件地址 最后 前言 .NET MAUI 的发布&#xff0c;项目中可以使用这个新的跨平台 UI 框架来轻松搭建的移动和桌面应用。 为了帮助大家更快地构建美观且功能丰富的应用&#xff0c;本文将推荐一款优秀…
阅读更多...
C语言典型例题39

C语言典型例题39

《C程序设计教程&#xff08;第四版&#xff09;——谭浩强》 例题3.7 求axbxc0方程的解。要求能处理任何情况下a、b、c的组合。 数学知识&#xff1a; ①当a0时&#xff0c;为一次方程bxc0&#xff1b;x-c/b&#xff1b; ②当a≠0时&#xff0c;为二次函数axbxc0。b-4c≥0时…
阅读更多...
LeetCode 热题100-22

LeetCode 热题100-22

相交链表 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 题目数据 保证 整个链式结构中不存在环。 注意&#xff0c;函数返…
阅读更多...
电池常用，但电芯热电耦合难？科学仿真技术轻松解决

电池常用，但电芯热电耦合难？科学仿真技术轻松解决

SimLab 电池热电耦合模型 SimLab 的Battery模块&#xff0c;用于模拟电荷守恒与电池模块中的能量方程耦合。在这种方法中&#xff0c;电芯被建模为一个均匀的介质&#xff0c;可以模拟电压-电流的响应和相关热量的产生。该解决方案具有单电位&#xff08;single potential &…
阅读更多...
创客匠人对话（上）：北京惢众教育创办人揭秘如何引爆大事件发售

创客匠人对话（上）：北京惢众教育创办人揭秘如何引爆大事件发售

老蒋创客圈第63期对话标杆直播连麦&#xff0c;本期我们邀请到【惢众身心成长家园平台】王辉老师。为我们“揭秘心理疗愈赛道&#xff0c;首发GMV突破百万的方法论&#xff01;”&#xff0c;深度分享自己通过原有客源造流量&#xff0c;引爆大事件发售的核心秘籍&#xff0c;拆…
阅读更多...
统计绘图：基于networkD3包绘制交互式桑基图

统计绘图：基于networkD3包绘制交互式桑基图

本文介绍通过R包 networkD3 绘制交互式桑基图。 桑基图&#xff08;Sankey Diagram&#xff09;&#xff0c;由节点&#xff08;Node&#xff09;和边&#xff08;分支&#xff0c;Edge&#xff09;组成&#xff0c;常用于展示数据的流动和分布情况&#xff1b;其中边的宽度与…
阅读更多...
TypeScript 之 JavaScript文件类型检查

TypeScript 之 JavaScript文件类型检查

启用对 JavaScript 文件的类型检查 在 TypeScript 编译选项 compilerOptions 全部配置项 中&#xff0c;可以通过以下2个属性配置 JavaScript Support&#xff1a; allowJs 是否允许编译 JavaScript 文件。默认值是 false。在默认情况下&#xff0c;TypeScript 编译器只处理 .…
阅读更多...
从0开始搭建vue + flask 旅游景点数据分析系统（十二）【完结篇】：用户管理之增删改查、用户信息更新

从0开始搭建vue + flask 旅游景点数据分析系统（十二）【完结篇】：用户管理之增删改查、用户信息更新

这一期继续完成用户管理的增删改查和登录用户修改自己信息的功能&#xff0c;首先完成后端接口的功能。 1 后端接口 这边有查询列表接口、查询单个接口、新增接口、修改接口、删除接口这5个接口&#xff1a; #** 用户信息的增删改查 *** # 用户列表 main.route(/users, meth…
阅读更多...
离线安装prometheus与Grafana实现可视化监控

离线安装prometheus与Grafana实现可视化监控

简介 prometheus 是一个专为云环境设计的开源系统监控和警报工具&#xff0c;它收集并存储多维度的时间序列数据&#xff0c;通过PromQL查询语言提供强大的数据检索能力&#xff0c;并支持可视化及警报功能。而 Grafana 则是一个开源的数据可视化平台&#xff0c;能够与包括Pr…
阅读更多...
2024软件测试面试官在面试的时候会做些什么？

2024软件测试面试官在面试的时候会做些什么？

虽然没有了金九银十&#xff0c;但是公司的测试HC还是有完全锁死&#xff0c;断断续续的也在帮着面试一些人。同时星球上也有很多人在关注面试的问题&#xff0c;本文就以自己的经验&#xff0c;从面试官的角度&#xff0c;聊聊面试过程中的那些事。 一、笔试面试官 在面试开…
阅读更多...
使用Flv.js无法播放视频

使用Flv.js无法播放视频

背景 由于项目需要&#xff0c;搭建了一套SRS直播服务&#xff0c;通过直播录制将视频报错并在本地播放。视频存储的格式为flv&#xff0c;所以使用flv.js插件来播放。测试时发现录制的视频无法播放&#xff0c;经过排查找到原因。 报错信息 控制台并无明显报错&#xff0c;…
阅读更多...
Keepalived高可用集群--几个实验带你认识集群的坚实后盾

Keepalived高可用集群--几个实验带你认识集群的坚实后盾

一、KeepAlived的发展 Keepalived起初是为LVS设计的&#xff0c;专门用来监控集群系统中各个服务节点的状态&#xff0c;它根据TCP/IP参考模型的第三、第四层、第五层交换机制检测每个服务节点的状态&#xff0c;如果某个服务器节点出现异常&#xff0c;或者工作出现故障&#…
阅读更多...
神经串联式语音转换:对基于串联的单次语音转换方法的再思考 论文笔记

神经串联式语音转换:对基于串联的单次语音转换方法的再思考 论文笔记

NEURAL CONCATENATIVE SINGING VOICE CONVERSION: RETHINKING CONCATENATION-BASED APPROACH FOR ONE-SHOT SINGING VOICE CONVERSION 笔记 发现问题&#xff1a; 在any-to-any的转换中,由于内容和说话人音色的解耦不足,导致源说话人的音色部分仍保留在转换后的音频中&#x…
阅读更多...
Dom4j详细介绍

Dom4j详细介绍

Dom4j 1.1 解析概览 将数据存储为XML格式后&#xff0c;程序化地访问这些数据变得至关重要。虽然Java基础的IO操作能够实现这一目标&#xff0c;但这一过程往往既复杂又繁琐&#xff0c;尤其是在处理大型文件或需要频繁读写操作的场景下。为了解决这些问题&#xff0c;开发者…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023