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

简介:
在 Vue.js 的开发中,组件是构建应用的重要基础。掌握组件的创建与使用,尤其是父子组件的通信和组件的注册与命名,是开发中不可或缺的技能。本文将详细探讨这些内容,并提供 Vue 2 和 Vue 3 的代码示例,帮助初学者深入理解和应用这些技术。
目标:
本文旨在帮助读者理解 Vue.js 中父子组件通信的原理,以及如何有效地注册和命名组件。读者将学会使用 props 和 events 进行组件间的通信,并掌握组件的全局和局部注册方法。
文章目录
- Vue.js 组件化开发:父子组件通信与组件注册详解
- 主要内容
- 1. 父子组件通信(Props 和 Events)
- 1.1 父组件向子组件传递数据(Props)
- 1.2 子组件向父组件发送消息(Events)
- 2. 组件注册与命名
- 2.1 全局注册
- 2.2 局部注册
- 2.3 组件命名规范
- 总结
主要内容
1. 父子组件通信(Props 和 Events)
什么是父子组件通信?
父子组件通信是指在 Vue.js 应用中,父组件与子组件之间进行数据和事件的传递。这通常通过 props 和 events 来实现。
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 元素发生冲突,通常推荐使用 PascalCase 或 kebab-case 命名组件。
PascalCase 示例
Vue.component('MyComponent', {// 组件选项
});
kebab-case 示例
Vue.component('my-component', {// 组件选项
});
Vue 3 中,推荐使用 PascalCase 来命名组件,但在模板中可以使用 kebab-case 进行引用。
总结
本文详细介绍了在 Vue.js 中创建和使用组件的核心知识点,包括父子组件之间的通信方式(props 和 events)以及组件的注册与命名方式。通过 Vue 2 和 Vue 3 的对比示例,希望你能更好地理解并掌握这些概念,从而在实际项目中更加高效地使用 Vue.js 进行开发。
看到这里的小伙伴,欢迎 点赞👍评论📝收藏🌟
希望这篇关于 Vue.js 组件化开发的文章对你有所帮助。如果有其他需要调整或补充的地方,请告诉我!
相关文章:
Vue.js 组件化开发:父子组件通信与组件注册详解
Vue.js 组件化开发:父子组件通信与组件注册详解 简介: 在 Vue.js 的开发中,组件是构建应用的重要基础。掌握组件的创建与使用,尤其是父子组件的通信和组件的注册与命名,是开发中不可或缺的技能。本文将详细探讨这些内容…...
【HTTP、Web常用协议等等】前端八股文面试题
HTTP、Web常用协议等等 更新日志 2024年9月5日 —— 什么情况下会导致浏览器内存泄漏? 文章目录 HTTP、Web常用协议等等更新日志1. 网络请求的状态码有哪些?1)1xx 信息性状态码2)2xx 成功状态码3)3xx 重定向状态码4&…...
Datawhale x李宏毅苹果书AI夏令营深度学习详解进阶Task03
在深度学习中,批量归一化(Batch Normalization,BN)技术是一种重要的优化方法,它可以有效地改善模型的训练效果。本文将详细讨论批量归一化的原理、实现方式、在神经网络中的应用,以及如何选择合适的损失函数…...
【机器学习】任务三:基于逻辑回归与线性回归的鸢尾花分类与波士顿房价预测分析
目录 1.目的和要求 1.1 掌握回归分析的概念和使用场景 1.2 掌握机器学习回归分析进行数据预测的有效方法 1.3 掌握特征重要性分析、特征选择和模型优化的方法 2.波士顿房价预测与特征分析 2.1第一步:导入所需的模块和包 2.2 第二步:加载波士顿房价…...
【操作系统存储篇】Linux文件基本操作
目录 一、Linux目录 二、Linux文件的常用操作 三、Linux文件类型 一、Linux目录 Linux有很多目录,Linux一切皆是文件,包括进程、设备等。 相对路径:相对于当前的操作目录,文件位于哪个目录。 绝对路径 :从根目录开…...
C++ | Leetcode C++题解之第387题字符串中的第一个唯一字符
题目: 题解: 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威尔克检验:针对于p值进行…...
DAY87 APP 攻防-安卓逆向篇Smail 语法反编译签名重打包Activity 周期Hook 模块
1、APK 逆向-数据修改-结构&格式 2、APK 逆向-逻辑修改-Smail 语法 3、APK 逆向-视图修改-Activity&Xml #章节点: 1、APP 资产-内在提取&外在抓包 2、APP 逆向-反编译&删验证&重打包 3、APP 安全-存储&服务&组件&注册等 演示案例&a…...
jenkins 工具使用
使用方式 替代手动,自动化拉取、集成、构建、测试;是CI/CD持续集成、持续部署主流开发模式中重要的环节;必须组件 jenkins-gitlab,代码公共仓库服务器(至少6G内存);jenkins-server,…...
使用C语言实现字符推箱子游戏
使用C语言实现字符推箱子游戏 推箱子(Sokoban)是一款经典的益智游戏,玩家通过移动角色将箱子推到目标位置。本文将带你一步步用C语言实现一个简单的字符版本的推箱子游戏。 游戏规则 玩家只能推箱子,不能拉箱子。只能将箱子推到…...
用SpringBoot API实现识别pdf文件是否含有表格
要使用Spring Boot API 实现一个识别 PDF 文件是否含有表格的功能,你可以结合 PDF 解析库(如 Apache PDFBox)来解析 PDF 文件内容,并通过分析文本或线条来判断 PDF 是否包含表格。然后使用 Spring Boot 提供的 REST API 来实现上传…...
嵌入式S3C2440:控制LED灯
发光二极管接口(左端)应为低电平 以LED1为例 LED1的接口为GPB5 void led_init(void) {//配置GPB5功能为输出GPBCON & ~(0x3 << 10);GPBCON | (0x1 << 10); //使GPB5输出高电平(关灯)GPBDAT | (1 << 5); }void led_on(void) {GPB…...
算法:区间dp
文章目录 一、适用场景二、基本思路步骤时间复杂度: 三、例题 区间动态规划(Interval DP)是一种用于解决某些需要处理区间或子段问题的动态规划方法,特别适合于问题的解可以通过子区间的解进行组合的情况。该方法的核心思想是在子…...
【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 项目介绍 博主个人介绍:CSDN认证博客专家,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 大数据检索加速…...
交友系统“陌陌”全方位解析
交友系统在现代社会中扮演着越来越重要的角色,尤其是随着互联网技术的发展,各种交友软件层出不穷。陌陌作为其中的佼佼者,其全方位解析对于理解交友系统的商业开发至关重要。 陌陌的核心功能是提供基于地理位置的社交服务,用户可…...
Android 删除开机动画
Android 删除开机动画 两种方法都是将debug.sf.nobootanimation的值改为属性1 第一种: frameworks/base/cmds/bootanimation/BootAnimationUtil.cpp bool bootAnimationDisabled() {char value[PROPERTY_VALUE_MAX]; // property_get("debug.sf.nobootani…...
我用 GPT 学占星
最近对占星赶兴趣,但是看到星盘中好多名词,不懂是什么意思?所以直接问 gpt , 发现回答的真的很棒🎉 ! 假如我想知道各个状态的具体是根据什么数据来显示的? 分分钟解决了我的问题; 我…...
CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型
CVPR 2025 | MIMO:支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题:MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者:Yanyuan Chen, Dexuan Xu, Yu Hu…...
黑马Mybatis
Mybatis 表现层:页面展示 业务层:逻辑处理 持久层:持久数据化保存 在这里插入图片描述 Mybatis快速入门 
引言:为什么 Eureka 依然是存量系统的核心? 尽管 Nacos 等新注册中心崛起,但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制,是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
3403. 从盒子中找出字典序最大的字符串 I
3403. 从盒子中找出字典序最大的字符串 I 题目链接:3403. 从盒子中找出字典序最大的字符串 I 代码如下: class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...
C++.OpenGL (20/64)混合(Blending)
混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...
C语言中提供的第三方库之哈希表实现
一. 简介 前面一篇文章简单学习了C语言中第三方库(uthash库)提供对哈希表的操作,文章如下: C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...
数学建模-滑翔伞伞翼面积的设计,运动状态计算和优化 !
我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态,并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...
认识CMake并使用CMake构建自己的第一个项目
1.CMake的作用和优势 跨平台支持:CMake支持多种操作系统和编译器,使用同一份构建配置可以在不同的环境中使用 简化配置:通过CMakeLists.txt文件,用户可以定义项目结构、依赖项、编译选项等,无需手动编写复杂的构建脚本…...
算法打卡第18天
从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder ,其中 inorder 是二叉树的中序遍历, postorder 是同一棵树的后序遍历,请你构造并返回这颗 二叉树 。 示例 1: 输入:inorder [9,3,15,20,7…...
