Vue3 学习笔记（十三）Vue组件详解


1、组件（Component） 介绍


组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码，可以帮助你将用户界面拆分成独立和可复用的部分。

每个 Vue 组件都是一个独立的 Vue 实例，具有自己的模板、数据、方法和生命周期钩子，使得组件可以自包含地定义和管理自己的功能和样式。


在这里插入图片描述


2、定义一个组件


(1)、单文件组件

当使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的 .vue 文件中，这被叫做单文件组件 (简称 SFC)：

<script setup>
import { ref } from 'vue'const count = ref(0)
</script><template><button @click="count++">You clicked me {{ count }} times.</button>
</template>

(2)、Vue 特定选项 JavaScript 对象

不使用构建步骤（如 webpack 或 Vite）的情况下，使用 Vue 3 的组合式 API 定义一个 Vue 组件。这种定义方式通常用于直接在浏览器中通过 <script> 标签引入 Vue.js 库的场景:

import { ref } from 'vue'export default {setup() {const count = ref(0)return { count }},template: `<button @click="count++">You clicked me {{ count }} times.</button>`// template: '#my-template-element'
}

以下是代码的详细解释：

导入 ref 函数：

import { ref } from 'vue';

这行代码从 Vue 库中导入了 ref 函数。ref 是一个用于创建响应式引用的函数，它接受一个初始值，并返回一个响应式的对象。


定义组件对象：

export default {setup() {const count = ref(0);return { count };},template: `<button @click="count++">You clicked me {{ count }} times.</button>`
};

这是一个 Vue 组件的 JavaScript 对象定义。它使用了 Vue 3 推荐的组合式 API。

setup 函数：

setup() {const count = ref(0);return { count };
}

setup 函数是组合式 API 的入口点。在这里，我们使用 ref 创建了一个名为 count 的响应式引用，并将其初始值设置为 0。setup 函数返回一个对象，其中包含了我们想要在模板中使用的响应式数据。在这个例子中，我们返回了 count。


模板：

template: `<button @click="count++">You clicked me {{ count }} times.</button>`

组件的 template 属性定义了组件的 HTML 模板。在这个模板中，我们有一个 <button> 元素，当它被点击时，会触发 count++ 操作。这表示 count 的值将增加 1。模板中的 {{ count }} 是一个插值表达式，它将显示 count 的当前值。


内联模板的注释：

// 也可以针对一个 DOM 内联模板：
// template: '#my-template-element'

这一行被注释掉了，但它说明了另一种定义模板的方法。你可以通过指定一个已经在 DOM 中存在的元素的 ID 来使用内联模板。


3、使用组件


要使用一个子组件，我们需要在父组件中导入它。假设我们把计数器组件放在了一个叫做 ButtonCounter.vue 的文件中，这个组件将会以默认导出的形式被暴露给外部。

ButtonCounter.vue 组件内容如下：

在这里插入图片描述


使用方法如下：

<script setup>
import ButtonCounter from './ButtonCounter.vue'
</script><template><h1>Here are many child components!</h1><ButtonCounter /><ButtonCounter /><ButtonCounter />
</template>

效果如下：
在这里插入图片描述


  • 通过 <script setup>，导入的组件都在模板中直接可用。

  • 组件可以被重用任意多次

  • 每当你使用一个组件，就创建了一个新的实例

  • 在单文件组件中，推荐为子组件使用 PascalCase 的标签名，以此来和原生的 HTML 元素作区分。虽然原生 HTML 标签名是不区分大小写的，但 Vue 单文件组件是可以在编译中区分大小写的。


4、子组件与父组件通讯 props


（1） 、defineProps()

在 Vue.js 中，props 是一种机制，允许父组件向子组件传递数据。props 是子组件声明的可接收的属性，这些属性由父组件提供，子组件可以通过 props 访问这些传递过来的值。

  • defineProps 是 <script setup> 中的一个宏，用于定义组件的 props。它接受一个字符串数组，数组中的每个字符串都是一个 prop 的名称。

子组件中 使用 defineProps 声明 props 属性：

<script setup>
import { ref } from 'vue'const count = ref(0)defineProps(['message'])</script><template><div><p>{{ message }}</p></div></template>

在这个子组件中，我们使用 defineProps 函数来声明 props。这个函数是 <script setup> 语法的一部分，用于定义组件的 props。

父组件中 传参：

<script setup>
import ButtonCounter from './ButtonCounter.vue'import { ref } from 'vue';const parentMessage = ref('Hello from parent!');
</script><template><ButtonCounter :message="parentMessage" />
</template>

在这个父组件中，我们导入了子组件，并使用 ref 函数创建了一个响应式的 parentMessage 变量。然后，我们通过 : 前缀将 parentMessage 作为 prop 传递给子组件。


效果如下：

在这里插入图片描述


（2） 、defineEmits()

在 Vue 3 中，defineEmits 是一个用于在组件的 setup 函数中定义 emits 选项的宏。它允许你指定可以从组件触发的事件及其相应的参数。

定义 emits 选项： 在 <script setup> 中，使用 defineEmits 来定义组件可以触发的事件。


<!-- ChildComponent.vue -->
<script setup>
import { defineEmits } from 'vue';// 定义组件可以触发的事件
const emit = defineEmits(['custom-event']);function handleClick() {emit('custom-event', { key: 'abc',value:'325r35' });
}</script><template><button @click="handleClick">Click me to trigger custom event</button>
</template>

父组件中处理子组件事件：

<!-- ParentComponent.vue -->
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';const eventPayload = ref(null);// 定义处理子组件事件的方法
function handleCustomEvent(payload) {eventPayload.value = payload;
}</script><template><div><ChildComponent@custom-event="handleCustomEvent"/><p>Last event payload: {{ eventPayload }}</p></div>
</template>

实现效果如下，当点击按钮时，触发事件：

在这里插入图片描述


注意事项

  • defineEmits 只能在 <script setup> 中使用。
  • 定义的事件名应与模板中使用的 v-on 或 @ 指令的事件名一致。
  • 使用 defineEmits 定义的事件可以在模板中通过 v-on 或 @ 指令监听，并在父组件中处理。

（3)、defineModel()

这个宏可以用来声明一个双向绑定 prop，通过父组件的 v-model 来使用。

在底层，这个宏声明了一个 model prop 和一个相应的值更新事件。

  • 如果第一个参数是一个字符串字面量，它将被用作 prop 名称

  • 否则，prop 名称将默认为 "modelValue"


在这两种情况下，都可以再传递一个额外的对象，它可以包含 prop 的选项和 model ref 的值转换选项。

以下是使用 defineModel 演示子组件和父组件的使用示例：

首先，创建一个子组件 ChildComponent ：

<script setup>const msg = defineModel('msg', { type: String, default: ''});
const score = defineModel('score', { type: Number, default: 0 });/*** 更新score（同步更新父元素中的数据）*/
const onClick = () => {score.value +=1;
};</script><template><div style="margin: 10px;padding: 8px;background-color: azure;"><span>子组件</span><div><input v-model="msg"  /></div><span>dubble score: {{score * 2}}</span><br /><button @click="onClick">score + 1</button></div>
</template>

这里使用了 defineModel 宏来定义两个模型，msg 和 score。这些模型在内部创建了对应的 prop 和 emit 事件，用于实现双向绑定。msg 是一个字符串类型的 prop，默认值为空字符串，score 是一个数字类型的 prop，默认值为 0。

  • defineModel 是 Vue 3 中的一个 API，用于在 <script setup> 中定义具有双向绑定能力的 props。
  • v-model 指令用于创建表单输入元素和应用状态之间的双向绑定。
  • @click 指令用于监听点击事件，并在事件发生时执行指定的函数。

然后，创建一个父组件：

<script setup>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';const msg = ref('test');
const score = ref(1);</script><template><div style="border: 1px solid goldenrod"><span>父组件</span><h1>{{ msg }}</h1><h2>origin-score: {{score}}</h2></div><ChildComponent v-model:msg="msg" v-model:score="score"/>
</template>

  • v-model:msg 和 v-model:score 是 v-model 指令的自定义版本，用于创建子组件的 msg 和 score 属性与父组件的 msg 和 score 数据的双向绑定。这意味着当子组件更改这些值时，父组件的相应数据也会更新，反之亦然。
  • 这种双向绑定是通过子组件内部使用 defineModel 或 defineProps 和 emit 实现的。子组件需要触发相应的更新事件（如 update:msg 和 update:score），以便父组件可以响应这些变化。
  • 由于 <script setup> 语法的简洁性，父组件中不需要 export default，也不需要显式定义 setup 函数。

实现效果如下：

当在子组件中输入 或者点击按钮事件，父组件都会同步更新。

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

MySQL基础（二）

MySQL基础（二）

目录 一. 数据库命令行基本操作指令 1. 查看当前有哪些数据库——show databases; 2. 创建数据库——create database 数据库名 charset utf8 3. 选中数据库——use 数据库名; 4. 删除数据库——drop database 数据库名; 二. 常用数据类型 2.1 数值类型 2.2. 字符串类型 …
阅读更多...
详细解读 CVPR2024：VideoBooth: Diffusion-based Video Generation with Image Prompts

详细解读 CVPR2024：VideoBooth: Diffusion-based Video Generation with Image Prompts

Diffusion Models专栏文章汇总：入门与实战 前言：今天是程序员节，先祝大家节日快乐！文本驱动的视频生成正在迅速取得进展。然而，仅仅使用文本提示并不足以准确反映用户意图，特别是对于定制内容的创建。个性化图片领域已经非常成功了，但是在视频个性化领域才刚刚起步，这篇…
阅读更多...
深度学习案例：带有一个隐藏层的平面数据分类

深度学习案例：带有一个隐藏层的平面数据分类

该案例来自吴恩达深度学习系列课程一《神经网络和深度学习》第三周编程作业&#xff0c;作业内容是设计带有一个隐藏层的平面数据分类。作业提供的资料包括测试实例&#xff08;testCases.py&#xff09;和任务功能包&#xff08;planar_utils.py&#xff09;&#xff0c;下载请…
阅读更多...
SD教程 重绘 ControlNet-Inpain

SD教程 重绘 ControlNet-Inpain

SD教程 重绘 ControlNet-Inpain ———————————————— 版权声明&#xff1a;本文为博主原创文章&#xff0c;遵循 CC 4.0 BY-SA 版权协议&#xff0c;转载请附上原文出处链接和本声明。原文链接&#xff1a;https://blog.csdn.net/A1353192296/article/details/13…
阅读更多...
【界面改版】JimuReport 积木报表 v1.9.0 版本发布，填报能力和大屏能力

【界面改版】JimuReport 积木报表 v1.9.0 版本发布，填报能力和大屏能力

项目介绍 积木报表JimuReport&#xff0c;是一款免费的数据可视化报表&#xff0c;含报表、仪表盘和大屏设计&#xff0c;像搭建积木一样完全在线设计&#xff01;功能涵盖&#xff1a;数据报表、打印设计、图表报表、门户设计、大屏设计等&#xff01; Web版报表设计器&#x…
阅读更多...
【网络】1.UDP通信

【网络】1.UDP通信

UDP通信 1 server1.1 server建立的步骤1.2 运行server 2 client2.1 client的建立步骤2.2 运行client 3 总结3.1 server3.2 client 1 server server的启动方式是&#xff1a;./udpserver 8080 --> 格式就是./proc port端口 port端口自己指定 1.1 server建立的步骤 获取文件描…
阅读更多...
告别冰冷机器声：GLM-4-Voice开启情感语音交互新时代！

告别冰冷机器声：GLM-4-Voice开启情感语音交互新时代！

目录 引言一、GLM-4-Voice概述二、GLM-4-Voice的架构三、GLM-4-Voice的主要功能四、GLM-4-Voice的技术原理五、GLM-4-Voice的应用场景六、GLM-4-Voice体验快速开始结语 引言 在人工智能的不断进步中&#xff0c;语音交互技术正逐渐成为人机沟通的重要桥梁。它不仅极大地提升了…
阅读更多...
MySQL定时异机备份

MySQL定时异机备份

场景&#xff1a;将A机器MySQL数据库部分表每日定时备份到B机器上 &#xff08;只适用于Linux&#xff09; 实现方式算是比简单了&#xff0c;就是用mysqldump生成文件&#xff0c;使用scp命令传输到另一台机器上。 1. 编写备份shell脚本 在A机器新建脚本 (当然没有vim的话vi…
阅读更多...
使用VS2019将C#代码生成DLL文件在Unity3D里面使用（一）

使用VS2019将C#代码生成DLL文件在Unity3D里面使用（一）

系列文章目录 untiy知识点 文章目录 系列文章目录&#x1f449;前言&#x1f449;一、首先你要先有VS&#x1f449;二、引用UnityAPI使用步骤&#x1f449;2-1.引用unitydll文件到项目里面&#x1f449;2-2.导入Dll文件 &#x1f449;三、编辑dll代码&#x1f449;四、导出dll…
阅读更多...
平台化运营公司如何在创业市场招商

平台化运营公司如何在创业市场招商

在当今商业环境中&#xff0c;平台化运营的公司正成为推动经济发展的重要力量。对于这类公司而言&#xff0c;在创业市场招商意义重大。 平台化运营公司具有独特特点&#xff1a;通过搭建开放共享平台连接供需双方&#xff0c;实现资源优化配置与价值创造。比如电子商务平台、社…
阅读更多...
聚类分析算法——K-means聚类 详解

聚类分析算法——K-means聚类 详解

K-means 聚类是一种常用的基于距离的聚类算法&#xff0c;旨在将数据集划分为 个簇。算法的目标是最小化簇内的点到簇中心的距离总和。下面&#xff0c;我们将从 K-means 的底层原理、算法步骤、数学基础、距离度量方法、参数选择、优缺点 和 源代码实现 等角度进行详细解析。…
阅读更多...
SpringMVC执行流程（视图阶段JSP、前后端分离阶段）、面试题

SpringMVC执行流程（视图阶段JSP、前后端分离阶段）、面试题

目录 1.SpringMVC执行流程分为以下两种 2.非前后端分离的SpringMVC的执行流程 3.前后端分离的项目SpringMVC执行流程 4. 面试题 1.SpringMVC执行流程分为以下两种 2.非前后端分离的SpringMVC的执行流程 流程图&#xff1a; 更加生动的描述&#xff1a; DisPatcherServlet…
阅读更多...
十分钟Linux中的epoll机制

十分钟Linux中的epoll机制

epoll机制 epoll是Linux内核提供的一种高效I/O事件通知机制&#xff0c;用于处理大量文件描述符的I/O操作。它适合高并发场景&#xff0c;如网络服务器、实时数据处理等&#xff0c;是select和poll的高效替代方案。 1. epoll的工作原理 epoll通过内核中的事件通知接口和文件…
阅读更多...
GRE Over IPsec（华三）

GRE Over IPsec（华三）

GRE Over IPsec 顾名思义&#xff0c;GRE在内&#xff0c;IPsec在外 那么当数据进入tunnel隧道后&#xff0c;会先被GRE封装后再进行IPsec感兴趣流acl匹配&#xff0c;匹配上了则封装IPsec&#xff0c;没匹配上则丢包 实验&#xff1a; 需求&#xff1a;总部pc能够通过gre o…
阅读更多...
echarts属性之xAxis

echarts属性之xAxis

xAxis 直角坐标系 grid 中的 x 轴&#xff0c;一般情况下单个 grid 组件最多只能放上下两个 x 轴&#xff0c;多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。 所有属性 xAxis. id string 组件 ID。默认不指定。指定则可用于在 option 或者 API 中引…
阅读更多...
盘点：2024年最新热门项目管理平台TOP11

盘点：2024年最新热门项目管理平台TOP11

一、项目管理平台的重要性 在当今竞争激烈的商业环境中&#xff0c;项目管理平台已成为企业提高效率和团队协作的关键工具。这主要是因为现代商业项目日益复杂&#xff0c;涉及多个部门、众多资源以及不断变化的需求。 首先&#xff0c;项目管理平台能够提高工作效率。例如&a…
阅读更多...
PHP数据类型

PHP数据类型

几种常用的数据类型&#xff1a; String&#xff08;字符串&#xff09; Integer&#xff08;整型&#xff09; Float&#xff08;浮点型&#xff09; Boolean&#xff08;布尔型&#xff09; NULL&#xff08;空值&#xff09; Array&#xff08;数组&#xff09; Obje…
阅读更多...
【大数据】Flink + Kafka 实现通用流式数据处理详解

【大数据】Flink + Kafka 实现通用流式数据处理详解

目录 一、前言 二、流式数据处理场景介绍 2.1 流式数据处理概述 2.1.1 流式数据处理场景介绍 2.2 流式数据处理技术栈 2.2.1 数据采集 2.2.2 数据处理 2.2.3 数据存储 2.2.4 数据展示 2.3 流式数据处理场景面临的问题和挑战 三、通用的流式数据处理场景解决方案 3.1…
阅读更多...
精准测试在基金团队应用实践

精准测试在基金团队应用实践

以下为作者观点&#xff1a; 一、引言 精准测试是一套计算机测试辅助分析系统&#xff0c;精准测试的核心组件包含&#xff0c;软件覆盖率分析、用例和代码的双向追踪、智能回归测试用例选取、缺陷定位、测试用例聚类分析、测试用例自动生成系统&#xff0c;这些功能完整的构…
阅读更多...
参与国家标准制定对企业发展有哪些好处？

参与国家标准制定对企业发展有哪些好处？

1. 提升企业竞争力&#xff1a; • 技术优势凸显&#xff1a;参与标准制定的过程中&#xff0c;企业能将自身先进的技术和管理理念融入标准&#xff0c;这不仅是对企业技术实力的认可&#xff0c;也能使企业在行业中占据技术制高点。 • 质量优势强化&#xff1a;国家标准对产品…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023