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

2024-09-06 04:28

本文主要是介绍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 组件化开发:父子组件通信与组件注册详解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1140997

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

嵌入式QT开发:构建高效智能的嵌入式系统

摘要: 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发,详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程,包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发,涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用,以及嵌入式 QT 与硬件设备的交互,包括输入输出设

OpenHarmony鸿蒙开发( Beta5.0)无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息,即可快速实现设备配网,是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递,利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力,实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后,即可发送相关配网数据。同时还支持与常规Sof

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca