当前位置: 首页 > news >正文

Vue.js 组件化开发:父子组件通信与组件注册详解

Vue.js 组件化开发:父子组件通信与组件注册详解

在这里插入图片描述
简介:
在 Vue.js 的开发中,组件是构建应用的重要基础。掌握组件的创建与使用,尤其是父子组件的通信和组件的注册与命名,是开发中不可或缺的技能。本文将详细探讨这些内容,并提供 Vue 2 和 Vue 3 的代码示例,帮助初学者深入理解和应用这些技术。

目标:
本文旨在帮助读者理解 Vue.js 中父子组件通信的原理,以及如何有效地注册和命名组件。读者将学会使用 propsevents 进行组件间的通信,并掌握组件的全局和局部注册方法。


文章目录

    • Vue.js 组件化开发:父子组件通信与组件注册详解
      • 主要内容
        • 1. 父子组件通信(Props 和 Events)
          • 1.1 父组件向子组件传递数据(Props)
          • 1.2 子组件向父组件发送消息(Events)
        • 2. 组件注册与命名
          • 2.1 全局注册
          • 2.2 局部注册
          • 2.3 组件命名规范
      • 总结

主要内容

1. 父子组件通信(Props 和 Events)

什么是父子组件通信?
父子组件通信是指在 Vue.js 应用中,父组件与子组件之间进行数据和事件的传递。这通常通过 propsevents 来实现。

1.1 父组件向子组件传递数据(Props)

Vue 2 示例代码

父组件 (ParentComponent.vue):

<template><div><h1>父组件</h1><ChildComponent :message="parentMessage" /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},data() {return {parentMessage: '来自父组件的信息'};}
};
</script>

子组件 (ChildComponent.vue):

<template><div><h2>子组件</h2><p>{{ message }}</p></div>
</template><script>
export default {props: ['message']
};
</script>

Vue 3 示例代码

父组件 (ParentComponent.vue):

<template><div><h1>父组件</h1><ChildComponent :message="parentMessage" /></div>
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';const parentMessage = ref('来自父组件的信息');
</script>

子组件 (ChildComponent.vue):

<template><div><h2>子组件</h2><p>{{ message }}</p></div>
</template><script setup>
import { defineProps } from 'vue';const props = defineProps({message: String
});
</script>
1.2 子组件向父组件发送消息(Events)

Vue 2 示例代码

父组件 (ParentComponent.vue):

<template><div><h1>父组件</h1><ChildComponent @childEvent="handleChildEvent" /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},methods: {handleChildEvent(payload) {alert(`收到子组件的事件,数据为: ${payload}`);}}
};
</script>

子组件 (ChildComponent.vue):

<template><div><h2>子组件</h2><button @click="sendEvent">点击发送事件</button></div>
</template><script>
export default {methods: {sendEvent() {this.$emit('childEvent', '子组件的数据');}}
};
</script>

Vue 3 示例代码

父组件 (ParentComponent.vue):

<template><div><h1>父组件</h1><ChildComponent @childEvent="handleChildEvent" /></div>
</template><script setup>
import ChildComponent from './ChildComponent.vue';function handleChildEvent(payload) {alert(`收到子组件的事件,数据为: ${payload}`);
}
</script>

子组件 (ChildComponent.vue):

<template><div><h2>子组件</h2><button @click="sendEvent">点击发送事件</button></div>
</template><script setup>
import { defineEmits } from 'vue';const emit = defineEmits(['childEvent']);function sendEvent() {emit('childEvent', '子组件的数据');
}
</script>

2. 组件注册与命名

什么是组件注册?
组件注册是将组件定义为可在模板中使用的自定义元素的过程。Vue 提供了全局注册和局部注册两种方式。

2.1 全局注册

Vue 2 示例代码

// main.js
import Vue from 'vue';
import App from './App.vue';
import MyComponent from './components/MyComponent.vue';Vue.component('MyComponent', MyComponent);new Vue({render: h => h(App)
}).$mount('#app');

Vue 3 示例代码

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import MyComponent from './components/MyComponent.vue';const app = createApp(App);
app.component('MyComponent', MyComponent);
app.mount('#app');
2.2 局部注册

Vue 2 示例代码

<template><div><MyComponent /></div>
</template><script>
import MyComponent from './MyComponent.vue';export default {components: {MyComponent}
};
</script>

Vue 3 示例代码

<template><div><MyComponent /></div>
</template><script setup>
import MyComponent from './MyComponent.vue';
</script>
2.3 组件命名规范

在 Vue.js 中,组件命名有一定的规范要求。为了避免与 HTML 元素发生冲突,通常推荐使用 PascalCasekebab-case 命名组件。

PascalCase 示例

Vue.component('MyComponent', {// 组件选项
});

kebab-case 示例

Vue.component('my-component', {// 组件选项
});

Vue 3 中,推荐使用 PascalCase 来命名组件,但在模板中可以使用 kebab-case 进行引用。


总结

本文详细介绍了在 Vue.js 中创建和使用组件的核心知识点,包括父子组件之间的通信方式(propsevents)以及组件的注册与命名方式。通过 Vue 2 和 Vue 3 的对比示例,希望你能更好地理解并掌握这些概念,从而在实际项目中更加高效地使用 Vue.js 进行开发。

看到这里的小伙伴,欢迎 点赞👍评论📝收藏🌟

希望这篇关于 Vue.js 组件化开发的文章对你有所帮助。如果有其他需要调整或补充的地方,请告诉我!

相关文章:

Vue.js 组件化开发:父子组件通信与组件注册详解

Vue.js 组件化开发&#xff1a;父子组件通信与组件注册详解 简介&#xff1a; 在 Vue.js 的开发中&#xff0c;组件是构建应用的重要基础。掌握组件的创建与使用&#xff0c;尤其是父子组件的通信和组件的注册与命名&#xff0c;是开发中不可或缺的技能。本文将详细探讨这些内容…...

【HTTP、Web常用协议等等】前端八股文面试题

HTTP、Web常用协议等等 更新日志 2024年9月5日 —— 什么情况下会导致浏览器内存泄漏&#xff1f; 文章目录 HTTP、Web常用协议等等更新日志1. 网络请求的状态码有哪些&#xff1f;1&#xff09;1xx 信息性状态码2&#xff09;2xx 成功状态码3&#xff09;3xx 重定向状态码4&…...

Datawhale x李宏毅苹果书AI夏令营深度学习详解进阶Task03

在深度学习中&#xff0c;批量归一化&#xff08;Batch Normalization&#xff0c;BN&#xff09;技术是一种重要的优化方法&#xff0c;它可以有效地改善模型的训练效果。本文将详细讨论批量归一化的原理、实现方式、在神经网络中的应用&#xff0c;以及如何选择合适的损失函数…...

【机器学习】任务三:基于逻辑回归与线性回归的鸢尾花分类与波士顿房价预测分析

目录 1.目的和要求 1.1 掌握回归分析的概念和使用场景 1.2 掌握机器学习回归分析进行数据预测的有效方法 1.3 掌握特征重要性分析、特征选择和模型优化的方法 2.波士顿房价预测与特征分析 2.1第一步&#xff1a;导入所需的模块和包 2.2 第二步&#xff1a;加载波士顿房价…...

【操作系统存储篇】Linux文件基本操作

目录 一、Linux目录 二、Linux文件的常用操作 三、Linux文件类型 一、Linux目录 Linux有很多目录&#xff0c;Linux一切皆是文件&#xff0c;包括进程、设备等。 相对路径&#xff1a;相对于当前的操作目录&#xff0c;文件位于哪个目录。 绝对路径 &#xff1a;从根目录开…...

C++ | Leetcode C++题解之第387题字符串中的第一个唯一字符

题目&#xff1a; 题解&#xff1a; class Solution { public:int firstUniqChar(string s) {unordered_map<char, int> position;queue<pair<char, int>> q;int n s.size();for (int i 0; i < n; i) {if (!position.count(s[i])) {position[s[i]] i;…...

数学建模--皮尔逊相关系数、斯皮尔曼相关系数

目录 1.总体的皮尔逊相关系数 2.样本的皮尔逊相关系数 3.对于皮尔逊相关系数的认识 4.描述性统计以及corr函数 ​编辑 5.数据导入实际操作 6.引入假设性检验 6.1简单认识 6.2具体步骤 7.p值判断法 8.检验正态分布 8.1jb检验 8.2威尔克检验&#xff1a;针对于p值进行…...

DAY87 APP 攻防-安卓逆向篇Smail 语法反编译签名重打包Activity 周期Hook 模块

1、APK 逆向-数据修改-结构&格式 2、APK 逆向-逻辑修改-Smail 语法 3、APK 逆向-视图修改-Activity&Xml #章节点&#xff1a; 1、APP 资产-内在提取&外在抓包 2、APP 逆向-反编译&删验证&重打包 3、APP 安全-存储&服务&组件&注册等 演示案例&a…...

jenkins 工具使用

使用方式 替代手动&#xff0c;自动化拉取、集成、构建、测试&#xff1b;是CI/CD持续集成、持续部署主流开发模式中重要的环节&#xff1b;必须组件 jenkins-gitlab&#xff0c;代码公共仓库服务器&#xff08;至少6G内存&#xff09;&#xff1b;jenkins-server&#xff0c;…...

使用C语言实现字符推箱子游戏

使用C语言实现字符推箱子游戏 推箱子&#xff08;Sokoban&#xff09;是一款经典的益智游戏&#xff0c;玩家通过移动角色将箱子推到目标位置。本文将带你一步步用C语言实现一个简单的字符版本的推箱子游戏。 游戏规则 玩家只能推箱子&#xff0c;不能拉箱子。只能将箱子推到…...

用SpringBoot API实现识别pdf文件是否含有表格

要使用Spring Boot API 实现一个识别 PDF 文件是否含有表格的功能&#xff0c;你可以结合 PDF 解析库&#xff08;如 Apache PDFBox&#xff09;来解析 PDF 文件内容&#xff0c;并通过分析文本或线条来判断 PDF 是否包含表格。然后使用 Spring Boot 提供的 REST API 来实现上传…...

嵌入式S3C2440:控制LED灯

发光二极管接口&#xff08;左端&#xff09;应为低电平 以LED1为例 LED1的接口为GPB5 void led_init(void) {//配置GPB5功能为输出GPBCON & ~(0x3 << 10);GPBCON | (0x1 << 10); //使GPB5输出高电平(关灯)GPBDAT | (1 << 5); }void led_on(void) {GPB…...

算法:区间dp

文章目录 一、适用场景二、基本思路步骤时间复杂度&#xff1a; 三、例题 区间动态规划&#xff08;Interval DP&#xff09;是一种用于解决某些需要处理区间或子段问题的动态规划方法&#xff0c;特别适合于问题的解可以通过子区间的解进行组合的情况。该方法的核心思想是在子…...

【14.1运行版】C++俄罗斯方块-实现欢迎界面

实现欢迎界面 #include <stdio.h>//C语言形式的输入输出 #include <graphics.h>//图形库的头文件//实现欢迎界面 void welcome(void);int main(void) {welcome();//colsegraph();return 0; }void welcome(void) {//初始化画布initgraph(550, 660);//设置窗口标题H…...

数据分析:R语言计算XGBoost线性回归模型的SHAP值

禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍SHAP用途计算方法:应用加载R包导入数据数据预处理函数模型介绍 SHAP(SHapley Additive exPlanations)值是一种解释机器学习模型预测的方法。它基于博弈论中的Shapley值概念,…...

SprinBoot+Vue图书馆预约与占座微信小程序的设计与实现

目录 1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue3.6 uniapp代码 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍&#xff1a;CSDN认证博客专家&#xff0c;CSDN平…...

云计算之大数据(上)

目录 一、Elasticsearch 1.1 产品组件 1.1.1 X-Pack 1.1.2 Beats数据采集中心 1.1.3 Logstash 1.1.4 Kibana 1.2 架构特性 1.2.1 性能 1.2.2 安全性 1.2.3 可用性 1.2.4 可扩展性 1.2.5 可维护性 1.2.6 国际化 1.3 综合检索分析 1.4 全观测 1.5 大数据检索加速…...

交友系统“陌陌”全方位解析

交友系统在现代社会中扮演着越来越重要的角色&#xff0c;尤其是随着互联网技术的发展&#xff0c;各种交友软件层出不穷。陌陌作为其中的佼佼者&#xff0c;其全方位解析对于理解交友系统的商业开发至关重要。 陌陌的核心功能是提供基于地理位置的社交服务&#xff0c;用户可…...

Android 删除开机动画

Android 删除开机动画 两种方法都是将debug.sf.nobootanimation的值改为属性1 第一种&#xff1a; frameworks/base/cmds/bootanimation/BootAnimationUtil.cpp bool bootAnimationDisabled() {char value[PROPERTY_VALUE_MAX]; // property_get("debug.sf.nobootani…...

我用 GPT 学占星

最近对占星赶兴趣&#xff0c;但是看到星盘中好多名词&#xff0c;不懂是什么意思&#xff1f;所以直接问 gpt &#xff0c; 发现回答的真的很棒&#x1f389; &#xff01; 假如我想知道各个状态的具体是根据什么数据来显示的&#xff1f; 分分钟解决了我的问题&#xff1b; 我…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

HBuilderX安装(uni-app和小程序开发)

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...