第IV章-Ⅰ Vue3组件与组件通信

第IV章-Ⅰ Vue3组件与组件通信

  • Vue组件
    • 根组件
    • 全局组件
    • 局部组件
    • 组件模板
    • 父子组件
  • 组件间通信
    • 子组件获取父组件数据
      • 数据传递选项prop
      • 传值校验
      • 单向数据流
    • 父组件获取子组件数据
      • emit 方法
    • 多级组件通信
      • provide 声明要传递的数据
      • inject 接收数据
  • 总结
  • 应用场景
    • 单向数据流(Props)
    • 事件通信(Emit)
    • 跨层级通信(Provide/Inject)

Vue组件

根组件

根组件是 Vue 应用的主要入口点。在 Vue 3 中,根组件通常是通过 createApp 函数创建的,然后挂载到一个 DOM 元素上。

import { createApp } from 'vue';
import App from './App.vue';const app = createApp(App);
app.mount('#app');

vue2中 根组件时通过new Vue 构造函数创建的。

import Vue from 'vue';
import App from './App.vue';new Vue({el: '#app',render: h => h(App)
});

全局组件

全局组件在 Vue 3 中通常在应用创建时通过 app.component 方法注册,这意味着它们可以在任何组件模板中无需导入就可以使用。

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import MyGlobalComponent from './components/MyGlobalComponent.vue';const app = createApp(App);
app.component('MyGlobalComponent', MyGlobalComponent);
app.mount('#app');

局部组件

局部组件只在注册它们的组件内可用。这有助于封装组件逻辑和模板,使其不会泄漏到全局范围。

// App.vue
<template><div><my-local-component /></div>
</template><script setup>
import MyLocalComponent from './components/MyLocalComponent.vue';export default {components: {MyLocalComponent}
}
</script>

组件模板

组件模板定义了组件的 HTML 结构。在 Vue 3 中,模板可以在单文件组件 (SFC) 的 标签中定义,或者在 JavaScript 中通过模板字符串定义。

// MyComponent.vue
<template><div>{{ message }}</div>
</template><script setup>
import { ref } from 'vue';const message = ref('Hello, Vue 3!');
</script>

父子组件

// ParentComponent.vue
<template><child-component :myProp="parentData" @myEvent="handleEvent"/>
</template><script setup>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';const parentData = ref('Data from parent');
const handleEvent = (data) => console.log('Event received:', data);export default {components: {ChildComponent}
}
</script>// ChildComponent.vue
<template><button @click="emitEvent">Send Event</button>
</template><script setup>
import { defineProps, defineEmits } from 'vue';const props = defineProps({myProp: String
});
const emit = defineEmits(['myEvent']);const emitEvent = () => emit('myEvent', 'Data from child');
</script>

组件间通信

子组件获取父组件数据

<!-- ParentComponent.vue -->
<template><child-component :user="userData" />
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';const userData = ref({ name: 'Alice', age: 30 });
</script><!-- ChildComponent.vue -->
<template><div>{{ user.name }}</div>
</template><script setup>
import { defineProps } from 'vue';const props = defineProps({user: {type: Object,required: true,default: () => ({ name: '', age: 0 })}
});
</script>

数据传递选项prop

父组件可以将数据通过 props 传递给子组件。

传值校验

在子组件中,可以对接收的 props 进行类型、必需性等校验。

单向数据流

props 是单向数据流,即只能从父组件流向子组件,子组件不应直接修改接收的 props。

父组件获取子组件数据

<!-- ChildComponent.vue -->
<template><button @click="sendData">Send Data to Parent</button>
</template><script setup>
import { defineEmits } from 'vue';const emit = defineEmits(['update']);const sendData = () => {emit('update', { newData: 'Updated info from child' });
};
</script>
<!-- ParentComponent.vue -->
<template><div><child-component @update="handleUpdate" /><p>{{ dataFromChild }}</p></div>
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';const dataFromChild = ref('');const handleUpdate = (payload) => {console.log('Received data:', payload);dataFromChild.value = payload.newData;  // 更新来自子组件的数据
};
</script>

在 <child-component @update=“handleUpdate” /> 中,@update 是用来监听来自 ChildComponent 的 update 事件。
handleUpdate 是在父组件中定义的方法,用于处理从子组件接收到的数据。
handleUpdate 函数接收一个参数 payload,这个参数包含了子组件通过 emit 方法发送的数据。
在这个例子中,我们假设 payload 是一个对象,其中包含一个属性 newData。
使用 ref 来定义 dataFromChild,这是一个响应式引用,存储从子组件接收到的数据。
当子组件发送数据时,通过更新 dataFromChild.value,这个更新会自动反映在父组件的模板中,显示最新的值。

emit 方法

子组件可以使用 $emit 方法来向父组件发送事件(可附带数据)。

多级组件通信

<!-- ParentComponent.vue -->
<script setup>
import { provide, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';const sharedData = ref('Shared info for deep components');
provide('sharedKey', sharedData);
</script><!-- ChildComponent.vue -->
<script setup>
import { inject } from 'vue';const sharedData = inject('sharedKey');
</script>

provide 声明要传递的数据

顶层组件或任意父组件使用 provide 来定义可以被子孙组件注入的数据。

inject 接收数据

任意子孙组件可以使用 inject 来接收上游组件提供的数据。

总结

  • 单向数据流(Props):保证了数据的可预测性和管理性,是最常用的通信方式,适用于父子组件。
  • 事件通信(Emit):允许子组件向父组件发送消息,是实现子向父通信的标准方法。
  • 跨层级通信(Provide/Inject):解决了深层嵌套组件间的通信问题,避免了繁琐的 props 传递。

应用场景

单向数据流(Props)

  • 组件封装与重用:当你开发可重用的组件时,如按钮、输入框、选择器等,使用 props 传递数据可以保证组件的独立性和封装性。组件只依赖于通过 props 接收的数据,而不关心数据的来源,这使得组件可以在不同的上下文中重用。
  • 父子组件结构:在父子组件的关系中,父组件通常扮演数据源的角色,子组件根据传入的 props 进行渲染。例如,一个博客列表组件(父组件)可能包含多个博客条目组件(子组件),每个条目组件通过 props 接收具体的博客数据。
  • 配置组件:使用 props 来传递配置选项,如是否禁用输入框、是否显示边框等,可以让组件的使用更加灵活。

事件通信(Emit)

  • 表单组件:在自定义表单控件(如日期选择器、滑块等)中,子组件需要通知父组件用户的交互动作,如选中的日期、滑动的值等。子组件可以使用 emit 来发送这些信息。
  • 操作反馈:在用户执行操作如点击按钮时,如果需要父组件处理某些逻辑(如打开弹窗、提交表单等),子组件可以 emit 一个事件来触发父组件的方法。
  • 状态更新:当子组件需要更新其不直接拥有的状态时,可以通过 emit 请求父组件进行状态更新。例如,一个任务列表项可能需要通知其父组件来删除一个任务。

跨层级通信(Provide/Inject)

  • 主题或配置共享:当需要在整个应用中共享如主题颜色、用户偏好设置等全局数据时,可以在根组件或一个高层组件中 provide 这些数据,任何子组件都可以通过 inject 来访问它。
  • 依赖注入:在大型应用中,特定的功能如权限管理、国际化(i18n)工具等可能需要在许多组件中使用。通过 provide/inject 可以将这些工具或服务注入到需要它们的任何组件中,无需通过所有中间组件传递。
  • 避免 prop 钻石问题:在复杂的组件结构中,如果多个层级的组件需要相同的数据,使用 provide/inject 可避免多层传递 props,这种情况通常称为 “props drilling” 或 “钻石问题”。

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

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

相关文章

强大而简洁:初学Python必须掌握的14个单行代码

Python的魅力与单行代码的重要性 Python&#xff0c;作为一种高级编程语言&#xff0c;自诞生以来就以其简洁、易读、易学的特性而广受开发者喜爱。其魅力不仅在于其强大的功能和广泛的应用领域&#xff0c;更在于其能够用简洁的代码实现复杂的功能&#xff0c;这种能力在很大…

Unity对接科大讯飞实时语音转写WebAPI(Windows平台)

科大讯飞官方文档&#xff1a;实时语音转写 API 文档 | 讯飞开放平台文档中心 (xfyun.cn) 参考文章&#xff1a;unity通过WebAPI连接Websocket实现讯飞语音识别与合成。_unity websocket audio-CSDN博客 要实现语音转文字。首先我们需要从麦克风获取到语音数据&#xff0c;这里…

Redisson 分布式锁和同步器

系列文章目录 文章目录 系列文章目录前言前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 redisson 是基于redis的扩展库,使得redis除了应用于缓存以外,还能做队列…

FloodFill-----洪水灌溉算法(DFS例题详解)

目录 一.图像渲染&#xff1a; 代码详解&#xff1a; 二.岛屿数量&#xff1a; 代码详解&#xff1a; 三.岛屿的最大面积&#xff1a; 代码详解&#xff1a; 四.被围绕的区域&#xff1a; 代码详解&#xff1a; 五.太平洋大西洋水流问题&#xff1a; 代码详解&#x…

基于SpringBoot的教务管理系统 - 源码免费(私信领取)

1. 研究目的 本项目旨在设计并实现一个基于Spring Boot的教务管理系统&#xff0c;以提升学校教务管理效率&#xff0c;优化教学资源配置&#xff0c;提高教学质量&#xff0c;满足学生、教师和管理人员的需求。 2. 研究要求 a. 需求分析 通过调研学校教务管理流程和现有系…

嵌入式单片机中必会的50个电路分享

单片机 电源 声音模块 收音机 485

操作系统-进程管理

1.进程的定义 2.进程的组成 3.进程的特点 4.进程控制结构 5.进程状态 6.进程挂起 6.线程优缺点 7.线程进程的比较 8 .为什么要使用线程 9.用户线程 9.内核线程 10.进程上下文切换信息储存在PCB中 11.fork()

83. 删除排序链表中的重复元素

Problem: 83. 删除排序链表中的重复元素 文章目录 思路解题方法复杂度Code 思路 遍历 解题方法 节点数范围[0, 300] 需要判断节点数是否为0 如果为0则直接返回设置当前节点指针cur&#xff0c;初始化curhead当cur.next非空时&#xff1a; 判断cur.val 与 cur.next.val 是否相等…

typescript-字面量

typescript-字面量 在计算机科学中&#xff0c;字面量用于在源代码中表示某个固定值。在JavaScript程序中&#xff0c;字面量不是变量&#xff0c;它是直接给出的固定值。 Null字面量 Null字面量只有一个&#xff0c;记作null Boolean字面量 Boolean的字面量有两个&#x…

JavaEE初阶Day 15:文件IO(1)

目录 Day 15&#xff1a;文件IO&#xff08;1&#xff09;IO文件1. 路径2. 文件的分类3. 使用Java针对文件系统进行操作3.1 属性3.2 构造方法3.3 方法 Day 15&#xff1a;文件IO&#xff08;1&#xff09; IO I&#xff1a;Input输入 O&#xff1a;Output输出 输入输出规则…

深入解析Spring Boot中的JWT令牌校验:安全身份验证与授权实践

在现代的Web应用程序中&#xff0c;身份验证和授权是至关重要的功能。 JSON Web Token&#xff08;JWT&#xff09;是一种用于安全传输信息的开放标准&#xff0c;它通过在用户和服务器之间传递被声明的对象来安全地传输信息。Spring Boot作为一种流行的Java开发框架&#xff…

golang 确保并发安全性

golang并发安全性 在Golang中&#xff0c;并发安全性通常指的是当多个goroutines同时访问同一个数据结构或资源时&#xff0c;能够保证数据的一致性和完整性&#xff0c;避免数据竞争、死锁等问题 并发安全性案例 案例1 创建 count&#xff0c;起1000个goroutines&#xff0c;…

Java中自定义异常指南

在Java编程中&#xff0c;异常处理是一个非常重要的部分&#xff0c;它允许我们在程序运行时捕获和处理错误情况。除了Java标准库提供的异常类外&#xff0c;我们还可以根据实际需要创建自定义的异常类。自定义异常可以帮助我们更好地描述和处理特定的错误情况。下面&#xff0…

【python的魅力】:教你如何用几行代码实现文本语音识别

文章目录 引言一、运行效果二、文本转换为语音2.1 使用pyttsx32.2 使用SAPI实现文本转换语音2.3 使用 SpeechLib实现文本转换语音 三、语音转换为文本3.1 使用 PocketSphinx实现语音转换文本 引言 语音识别技术&#xff0c;也被称为自动语音识别&#xff0c;目标是以电脑自动将…

Tomcat启动闪退怎么解决(文末附终极解决方案)

AI是这么告诉我的 Tomcat启动时出现闪退问题可能由多种原因引起&#xff0c;以下是解决此类问题的一些通用方法&#xff1a; 检查环境变量&#xff1a; 确保已经正确设置了JAVA_HOME和JRE_HOME环境变量&#xff0c;并指向正确的Java安装路径。将Java的bin目录添加到系统的PATH…

c语言题目

一些关于c语言的题目 文章目录 一、计算程序输出二、以下程序运行时&#xff0c;若输入1abcedf2df<回车>输出结果是将flag的第二个bit置0结构体大小下列C程序执行后c输出结果为&#xff08;&#xff09;设有定义char *p[]{"Shanghai","Beijing",&quo…

使用独立的 centos 7 安装软件后 commit 为新的镜像并自启动进程

使用独立的 centos 7 安装软件后 commit 为新的镜像&#xff0c;在 dockerfile 里通过添加 CMD ["/usr/sbin/init"] 这个命令来实现程序在容器中的开机自启动&#xff0c;并在 docker run 时添加参数 --privileged 获取容器内真正的 root 权限。 在 docker run 命令…

英语四级备考之名词的定义

名词是人、动物、事物、地方、状态、品质或动作的名称。它可以 表示具体的东西&#xff0c;也可表示抽象的东西。下面斜体字都是名词&#xff1a; John is my friend&#xff0e;My children love their teachers&#xff0e;&#xff08;人&#xff09; The dog is running a…

富格林:细节决定能否安全出金

富格林悉知&#xff0c;投资者都希望在现货黄金交易市场中获利&#xff0c;但并非所有投资者都能实现获利的心愿&#xff0c;有时候忽略一些细节问题也会影响最终的投资效果。投资者应该注重细节实现安全出金才是我们进行投资的最终目标。下面富格林将总结一些注重细节实现安全…

scikit-learn:Python中的机器学习-1

简介&#xff1a;问题设置 什么是机器学习&#xff1f; 机器学习是关于构建具有可调参数的程序&#xff0c;这些参数可以自动调整&#xff0c;以便通过适应先前看到的数据来改善其行为。机器学习可以被认为是人工智能的一个子领域&#xff0c;因为这些算法可以被视为构建模块…