当前位置: 首页 > 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; 我…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...