title: vue3组件通信与props

date: 2024/5/31 下午9:00:57

updated: 2024/5/31 下午9:00:57

categories:

  • 前端开发

tags:

  • Vue3组件
  • Props详解
  • 生命周期
  • 数据通信
  • 模板语法
  • Composition API
  • 单向数据流

Vue 3 组件基础

在 Vue 3 中,组件是构建用户界面的基本单位,它们是可复用的 Vue 实例,具有自己的模板、数据、方法等。组件化开发使得代码更加模块化,易于管理和维护。以下是 Vue 3 组件的基础知识:

1. 组件的创建与注册

在 Vue 3 中,组件需要先定义后使用。定义组件的方式有两种:全局注册和局部注册。

全局注册

全局注册的组件可以在任何地方使用,通过 app.component 方法进行注册:

  1. import { createApp } from 'vue';
  2. import App from './App.vue';
  3. const app = createApp(App);
  4. app.component('my-component', {
  5. // 组件选项
  6. });
  7. app.mount('#app');

局部注册

局部注册的组件只能在注册它的组件内部使用,通常在组件的 components 选项中进行注册:

  1. export default {
  2. components: {
  3. 'my-component': {
  4. // 组件选项
  5. }
  6. }
  7. }

2. 组件选项

组件选项包括模板、数据、方法、生命周期钩子等。

模板 (Template)

组件的模板定义了组件的结构,可以使用 HTML 和 Vue 的模板语法:

  1. <template>
  2. <div>
  3. <h1>{{ title }}</h1>
  4. <p>{{ content }}</p>
  5. </div>
  6. </template>

数据 (Data)

组件的数据是响应式的,需要是一个函数,返回一个数据对象:

  1. export default {
  2. data() {
  3. return {
  4. title: 'Hello Vue 3',
  5. content: 'Welcome to Vue 3 component basics.'
  6. };
  7. }
  8. }

方法 (Methods)

组件的方法定义在 methods 选项中,可以在模板中通过事件绑定来调用:

  1. export default {
  2. methods: {
  3. greet() {
  4. alert('Hello from Vue 3 component!');
  5. }
  6. }
  7. }

生命周期钩子 (Lifecycle Hooks)

Vue 3 提供了多个生命周期钩子,允许你在组件的不同阶段执行代码。例如:

  1. export default {
  2. created() {
  3. console.log('Component created');
  4. },
  5. mounted() {
  6. console.log('Component mounted');
  7. }
  8. }

3. 组件通信

组件之间的通信是 Vue 应用中的常见需求,Vue 3 提供了多种通信方式,包括 props、自定义事件、插槽等。

Props

Props 允许父组件向子组件传递数据:

  1. // 子组件
  2. export default {
  3. props: {
  4. message: String
  5. }
  6. }
  7. // 父组件
  8. <child-component :message="hello"></child-component>

自定义事件

子组件可以通过自定义事件向父组件传递数据:

  1. // 子组件
  2. this.$emit('my-event', data);
  3. // 父组件
  4. <child-component @my-event="handleEvent"></child-component>

插槽 (Slots)

插槽允许父组件向子组件传递内容:

  1. <!-- 子组件 -->
  2. <slot></slot>
  3. <!-- 父组件 -->
  4. <child-component>
  5. <p>This content is passed to the child component via slot.</p>
  6. </child-component>

4. 组件的复用与组合

Vue 3 鼓励组件的复用和组合,通过 props、插槽等方式,可以构建出高度可复用的组件库。同时,Vue 3 还引入了 Composition API,使得组件的逻辑更加清晰和易于复用。

什么是 props?

在 Vue.js 框架中,props 是一个组件的属性,它可以接收来自父组件的数据,并将其传递到子组件中。props 使得子组件能够接收外部传入的信息,从而可以在不需要知道外部具体细节的情况下,实现与父组件的交互和数据传递。

Props 的作用

  1. 传参:父组件可以通过 props 将数据传递给子组件。
  2. 验证数据类型:在定义 props 时,可以指定期望的数据类型,这样 Vue 会在开发过程中进行类型检查,并在浏览器控制台中抛出警告,有助于提前发现潜在问题。
  3. 设置默认值:如果父组件没有传递相应的 prop,可以设置默认值以确保子组件能够接收到一个合理的默认值。

Props 的使用

在 Vue 3 中,定义 props 的方式有几种,包括使用字符串数组、对象形式以及使用 TypeScript 的类型注解。

字符串数组形式

  1. export default {
  2. props: ['message']
  3. }

这表示组件期望接收一个名为 message 的 prop,它是一个字符串类型。

对象形式

  1. export default {
  2. props: {
  3. message: String,
  4. title: {
  5. type: String,
  6. default: 'Default Title'
  7. }
  8. }
  9. }

这种方式下,message 被指定为字符串类型,而 title 被指定为字符串类型,并且有一个默认值。

TypeScript 类型注解

在使用 TypeScript 时,可以利用类型注解来定义 props

  1. export default {
  2. props: {
  3. message: string,
  4. title: string
  5. }
  6. }

Props 的传递

在父组件中,通过在模板中使用 v-bind 指令或者简写为 : 来传递 props

  1. <!-- 父组件 -->
  2. <child-component :message="parentMessage"></child-component>

在这里,parentMessage 是父组件中的一个数据属性,它将被传递给名为 child-component 的子组件。

Props 的验证

在 Vue.js 中,props 验证是指对组件传入的 props 进行类型检查和默认值设置等验证。Vue 提供了一个可选的验证功能,可以在定义 props 时进行设置。以下是一些常见的 props 验证规则:

  1. 类型验证:可以指定 props 的类型,如 StringNumberBooleanArrayObject 等。
  2. 默认值:可以为 props 设置默认值,如果未传入 prop,则使用默认值。
  3. 必需性:可以指定 props 是否为必需,如果为必需,则必须在父组件中传入。
  4. 自定义验证:可以使用 validator 函数进行自定义验证。
  5. 单位转换:对于数值类型,可以指定单位,如 px% 等,Vue 会自动进行单位转换。

下面是一个使用 props 验证的例子:

  1. export default {
  2. props: {
  3. // 基本类型验证
  4. title: {
  5. type: String,
  6. default: '默认标题'
  7. },
  8. // 数值类型验证,可以指定单位
  9. width: {
  10. type: Number,
  11. default: 100,
  12. validator: (value) => {
  13. return value >= 0; // 自定义验证,确保宽度非负
  14. }
  15. },
  16. // 数组类型验证
  17. items: {
  18. type: Array,
  19. default: () => []
  20. },
  21. // 对象类型验证
  22. config: {
  23. type: Object,
  24. default: () => ({})
  25. },
  26. // 布尔值类型验证
  27. isActive: {
  28. type: Boolean,
  29. default: false
  30. }
  31. }
  32. }

在这个例子中,title 被验证为字符串类型,有一个默认值;width 被验证为数值类型,有一个默认值,并且有一个自定义的验证函数确保它非负;items 被验证为数组类型,有一个默认的空数组;config 被验证为对象类型,有一个默认的空对象;isActive 被验证为布尔类型,有一个默认的 false 值。

如果父组件传递给子组件的 props 不满足这些验证规则,Vue 将抛出一个警告。这些验证规则有助于确保组件接收到的数据是预期的类型和格式,从而提高组件的健壮性。AD:首页 | 一个覆盖广泛主题工具的高效在线平台

动态Props

在Vue中,动态Props指的是父组件向子组件传递的Props值可以在运行时动态确定。这可以通过使用v-bind指令或简写为:来实现。动态Props的值可以是表达式、计算属性或方法返回的结果。

  1. <template>
  2. <ChildComponent :prop-name="dynamicValue" />
  3. </template>
  4. <script>
  5. import ChildComponent from './ChildComponent.vue';
  6. export default {
  7. components: {
  8. ChildComponent
  9. },
  10. data() {
  11. return {
  12. dynamicValue: '动态值'
  13. };
  14. }
  15. };
  16. </script>

单向数据流

在Vue中,单向数据流指的是数据只能从父组件流向子组件,不能反向流动。这是通过propsemit方法实现的。props用于父组件向子组件传递数据,而emit方法允许子组件向父组件发送事件。

AD:专业搜索引擎

父子组件通信

父子组件通信主要有以下几种方式:

  1. Props:父组件通过Props向子组件传递数据。
  2. **\(emit 方法**:子组件通过`\)emit方法触发事件,父组件通过@eventName`监听这些事件。
  1. <!-- 父组件 -->
  2. <template>
  3. <ChildComponent @child-event="handleChildEvent" />
  4. </template>
  5. <script>
  6. import ChildComponent from './ChildComponent.vue';
  7. export default {
  8. components: {
  9. ChildComponent
  10. },
  11. methods: {
  12. handleChildEvent(data) {
  13. console.log('收到子组件的事件:', data);
  14. }
  15. }
  16. };
  17. </script>
  1. <!-- 子组件 -->
  2. <template>
  3. <button @click="sendMessageToParent">发送消息给父组件</button>
  4. </template>
  5. <script>
  6. export default {
  7. methods: {
  8. sendMessageToParent() {
  9. this.$emit('child-event', 'Hello from child!');
  10. }
  11. }
  12. };
  13. </script>

非父子组件通信

非父子组件通信有以下几种方式:

  1. Provide 和 Inject:祖先组件通过provide选项来提供变量,所有的子孙组件都可以通过inject选项来接收这个变量。

    AD:漫画首页
  2. Event Bus:创建一个中央事件总线实例,不同组件通过触发或监听事件来进行通信。
  1. // 创建Event Bus实例
  2. const eventBus = new Vue();
  3. // 祖先组件
  4. eventBus.$emit('update-data', 'some data');
  5. // 后代组件
  6. eventBus.$on('update-data', (data) => {
  7. console.log('收到数据:', data);
  8. });

Props 的限制

  1. 类型限制:可以指定props的类型,如StringNumberBoolean等。
  2. 默认值:可以为props设置默认值。
  3. 必需性:可以指定props是否为必需。
  4. 自定义验证:可以使用validator函数进行自定义验证。
  5. 单位转换:对于数值类型,可以指定单位,如px%等,Vue会自动进行单位转换。

总结

Vue.js通过提供灵活的组件通信机制,使得前端开发更加高效和模块化。父子组件之间的通信通过propsemit实现,遵循单向数据流原则;非父子组件间则可以通过provideinject,或者事件总线来实现。这些通信机制不仅使得组件之间的数据传递更加清晰,也提高了应用的可维护性。同时,props的验证机制确保了组件接收到的数据是符合预期格式的,增加了组件的稳定性。

vue3组件通信与props的更多相关文章

  1. vue组件通信(props,$emit,$attrs,$listeners)

    朝颜陌   vue基础----组件通信(props,$emit,$attrs,$listeners) 一.父传子,子传孙 1. props 1>在父组件中通过子组件自定义的标签属性来传递数据. ...

  2. vue基础----组件通信(props,$emit,$attrs,$listeners)

    一.父传子,子传孙 1. props 1>在父组件中通过子组件自定义的标签属性来传递数据. 2>在子组件中通过props声明希望用到的数据 <body> <div id= ...

  3. 【Vue组件通信】props、$ref、$emit,组件传值

    1.什么是组件通信 组件间如何通信,也就成为了vue中重点知识,组件通信,涉及到组件之间数据的传递.类似NET POST/GET参数传递. Vue基本的三种传递方式** (props.\(ref.\) ...

  4. 详细讲解vue.js里的父子组件通信(props和$emit)

    在进入这个话题之前,首先我们先来想一下在vue里,如何写一个父子组件.为了简单起见,下面的代码我都没用脚手架来构建项目,直接在html文件里引入vue.js来作为例子.父子组件的写法如下: <d ...

  5. Vue中组件通信的几种方法(Vue3的7种和Vue2的12种组件通信)

    Vue3组件通信方式: props $emit expose / ref $attrs v-model provide / inject Vuex 使用方法: props 用 props 传数据给子组 ...

  6. react组件通信那些事儿

    父组件是调用组件的组件.现在看来,感觉父组件就是一个壳子,定义好壳子里面会有什么,而子组件是一个具体的实现,说明,会用到什么东西,如果有这些东西,会进行什么操作.总之,父组件是材料,有水和泥,子组件告 ...

  7. vue2.X 组件通信($emit $on props)

    1.index.html  子组件直接修改父组件的数据 组件通讯: vm.$emit(); vm.$on(); 父组件和子组件: 子组件想要拿到父组件数据: 通过 props 之前,子组件可以更改父组 ...

  8. vue 父子组件通信props/emit

    props 1.父组件传递数据给子组件 父组件: <parent> <child :childMsg="msg"></child>//这里必须要 ...

  9. Vue 组件通信的多种方式(props、$ref、$emit、$attr、 $listeners)

    prop和$ref之间的区别: prop 着重于数据的传递,它并不能调用子组件里的属性和方法.像创建文章组件时,自定义标题和内容这样的使用场景,最适合使用prop. $ref 着重于索引,主要用来调用 ...

  10. vue第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 )

    第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...

随机推荐

  1. 力扣378(java&python)-有序矩阵中第 K 小的元素(中等)

    题目: 给你一个 n x n 矩阵 matrix ,其中每行和每列元素均按升序排序,找到矩阵中第 k 小的元素.请注意,它是 排序后 的第 k 小元素,而不是第 k 个 不同 的元素. 你必须找到一个 ...

  2. [ARC174B] Bought Review 题解

    [题目描述] 你开了一家店,有 \(A_i\) 个 \(i\) 星级评论,你可以花费 \(P_i\) 元买到一个 \(i\) 星评论,问使得这家店评论的星星平均值不小于 \(3\),最少要花多少钱. ...

  3. Serverless JOB | 传统任务新变革

    简介: SAE Job 重点解决了用户的效率和成本问题,在兼具传统任务使用体验和功能的同时按需使用,按量计费,做到低门槛任务上云,节省闲置资源成本. Job 作为一种运完即停的负载类型,在企业级开发中 ...

  4. 3千字带你搞懂XXL-JOB任务调度平台

    思维导图 文章已收录Github精选,欢迎Star:https://github.com/yehongzhi/learningSummary 一.概述 在平时的业务场景中,经常有一些场景需要使用定时任 ...

  5. 实操指南 | Resource Queue如何实现对AnalyticDB PostgreSQL的资源管理?

    简介: 作者:阿里云数据库OLAP产品部 - 子华 一 背景 AnalyticDB PostgreSQL版(简称ADB PG)是阿里云数据库团队基于PostgreSQL内核(简称PG)打造的一款云原生 ...

  6. [Blockchain] (Binance Smart Chain) BSC 测试网 BNB 水龙头

    测试网BNB水龙头 https://testnet.binance.org/faucet-smart 测试网区块浏览器 https://testnet.bscscan.com 主网区块浏览器 http ...

  7. 9.prometheus监控--监控springboot2.x(Java)

    一.环境部署 yum search java | grep jdk yum install -y java-11-openjdk-devel 二.监控java应用(tomcat/jar) JMX ex ...

  8. go语言package使用

    近期接触go感觉package包之间引用很麻烦,很绕圈子.下面一起理一理这个package咋用 关于package: 1.不限于一个文件,可以多个文件组成一个package 2.不要求package的 ...

  9. 什么是SQL 语句中相关子查询与非相关子查询

    1.什么是SQL子查询 要理解相关子查询和非相关子查询,我们得首先理解什么是子查询,子查询是指在一个查询语句中嵌套的另一个查询语句. 子查询可以嵌套在其他查询语句中,如 SELECT.INSERT.U ...

  10. 阿里巴巴Canal常见问题:重复解析/Filter失效/消费落后

    前言 Canal是阿里巴巴开源的数据库Binlog日志解析框架,主要用途是基于 MySQL 数据库增量日志解析,提供增量数据订阅和消费. 在之前我写的文章阿里开源MySQL中间件Canal快速入门中, ...