vue3组件通信与props

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 方法进行注册：

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.component('my-component', {
  // 组件选项
});

app.mount('#app');
局部注册

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

export default {
  components: {
    'my-component': {
      // 组件选项
    }
  }
}

2. 组件选项

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

模板 (Template)

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

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>
数据 (Data)

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

export default {
  data() {
    return {
      title: 'Hello Vue 3',
      content: 'Welcome to Vue 3 component basics.'
    };
  }
}
方法 (Methods)

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

export default {
  methods: {
    greet() {
      alert('Hello from Vue 3 component!');
    }
  }
}
生命周期钩子 (Lifecycle Hooks)

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

export default {
  created() {
    console.log('Component created');
  },
  mounted() {
    console.log('Component mounted');
  }
}

3. 组件通信

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

Props

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

// 子组件
export default {
  props: {
    message: String
  }
}

// 父组件
<child-component :message="hello"></child-component>
自定义事件

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

// 子组件
this.$emit('my-event', data);

// 父组件
<child-component @my-event="handleEvent"></child-component>
插槽 (Slots)

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

<!-- 子组件 -->
<slot></slot>

<!-- 父组件 -->
<child-component>
  <p>This content is passed to the child component via slot.</p>
</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 的类型注解。

字符串数组形式
export default {
  props: ['message']
}

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

对象形式
export default {
  props: {
    message: String,
    title: {
      type: String,
      default: 'Default Title'
    }
  }
}

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

TypeScript 类型注解

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

export default {
  props: {
    message: string,
    title: string
  }
}

Props 的传递

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

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

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

Props 的验证

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

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

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

export default {
  props: {
    // 基本类型验证
    title: {
      type: String,
      default: '默认标题'
    },
    // 数值类型验证，可以指定单位
    width: {
      type: Number,
      default: 100,
      validator: (value) => {
        return value >= 0; // 自定义验证，确保宽度非负
      }
    },
    // 数组类型验证
    items: {
      type: Array,
      default: () => []
    },
    // 对象类型验证
    config: {
      type: Object,
      default: () => ({})
    },
    // 布尔值类型验证
    isActive: {
      type: Boolean,
      default: false
    }
  }
}

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

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

动态Props

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

<template>
  <ChildComponent :prop-name="dynamicValue" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      dynamicValue: '动态值'
    };
  }
};
</script>

单向数据流

在Vue中，单向数据流指的是数据只能从父组件流向子组件，不能反向流动。这是通过props和emit方法实现的。props用于父组件向子组件传递数据，而emit方法允许子组件向父组件发送事件。
AD：专业搜索引擎

父子组件通信

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

  1. Props：父组件通过Props向子组件传递数据。
  2. ** e m i t 方法 ∗ ∗ ：子组件通过 ‘ emit 方法**：子组件通过` emit方法∗∗：子组件通过‘emit方法触发事件，父组件通过@eventName`监听这些事件。
<!-- 父组件 -->
<template>
  <ChildComponent @child-event="handleChildEvent" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildEvent(data) {
      console.log('收到子组件的事件:', data);
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <button @click="sendMessageToParent">发送消息给父组件</button>
</template>
<script>
export default {
  methods: {
    sendMessageToParent() {
      this.$emit('child-event', 'Hello from child!');
    }
  }
};
</script>

非父子组件通信

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

  1. Provide 和 Inject：祖先组件通过provide选项来提供变量，所有的子孙组件都可以通过inject选项来接收这个变量。
    AD：漫画首页
  2. Event Bus：创建一个中央事件总线实例，不同组件通过触发或监听事件来进行通信。
// 创建Event Bus实例
const eventBus = new Vue();

// 祖先组件
eventBus.$emit('update-data', 'some data');

// 后代组件
eventBus.$on('update-data', (data) => {
  console.log('收到数据:', data);
});

Props 的限制

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

总结

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

V90 PN总线伺服通过FB285速度控制实现正弦位置轨迹运动(解析法和数值法对比测试)

V90 PN总线伺服通过FB285速度控制实现正弦位置轨迹运动(解析法和数值法对比测试)

V90总线伺服相关内容请参考专栏系列文章，这里不在详述 1、V90伺服PN总线速度随动控制 V90伺服PN总线速度随动控制(手摇轮功能)_手摇轮可以接总线plc吗?-CSDN博客文章浏览阅读632次。V90PN总线控制相关内容，请参考下面文章链接：博途1200/1500PLC V90 PN通信控制 (FB284功能…
阅读更多...
构建企业级AI私有知识库

构建企业级AI私有知识库

一、引言 在当今竞争激烈的市场环境中&#xff0c;企业为了保持竞争优势&#xff0c;需要高效地管理和利用内部知识资源。构建一个企业级AI私有知识库&#xff0c;不仅可以集中存储和管理企业知识&#xff0c;还能通过人工智能技术实现知识的智能化处理和利用。本文将详细介绍…
阅读更多...
模型 STORY评估框架

模型 STORY评估框架

说明&#xff1a;系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_思维模型目录。故事五要素&#xff1a;结构、时间、观点、现实、收益 。 1 STORY评估框架的应用 1.1 STORY模型展示其个性化在线学习解决方案的优势 一家在线教育平台想要通过一个故事来展示其个性…
阅读更多...
Spring 框架：Java 企业级开发的基石

Spring 框架：Java 企业级开发的基石

文章目录 序言Spring 框架的核心概念Spring 框架的主要模块Spring Boot&#xff1a;简化 Spring 开发Spring Cloud&#xff1a;构建微服务架构实际案例分析结论 序言 Spring 框架自 2002 年发布以来&#xff0c;已经成为 Java 企业级开发的标准之一。它通过提供全面的基础设施…
阅读更多...
Qt 窗口

Qt 窗口

在Qt Creator 中创建项目的时候&#xff0c;我们能够选择创建QMainWindow 还是 QWidget 两种窗口。 二者有什么区别呢&#xff1f;其中 QMainWindow 是一种主窗口&#xff0c;包含菜单栏&#xff0c;工具栏&#xff0c;状态栏&#xff0c;中心窗口和浮动窗口等多个窗口组合&…
阅读更多...
vs2022 MSVC2017_64 调试Qt5.14.2源码

vs2022 MSVC2017_64 调试Qt5.14.2源码

pdb调试文件下载路径https://download.qt.io/online/qtsdkrepository/windows_x86/desktop/qt5_5142/qt.qt5.5142.debug_info.win64_msvc2017_64/ 在vs中添加pdb文件符号路径&#xff0c;使其qt在调试时能查找到相应的符号文件。 在需要调试的解决方案下通过解决方案点击&…
阅读更多...
引领采购数字化变革，商越科技如何帮企业穿越周期？

引领采购数字化变革，商越科技如何帮企业穿越周期？

导读 在企业“降本增效”的路上&#xff0c;采购数字化已经站上C位。采购数字化对企业究竟带来哪些价值&#xff1f; 在中国采购数字化赛道&#xff0c;行业领军者已经出现。 正文 面对经济环境的不确定性&#xff0c;企业都在寻找能够穿越周期的确定性。 “在经济不确定的大…
阅读更多...
【运维项目经历|023】Docker自动化部署与监控项目

【运维项目经历|023】Docker自动化部署与监控项目

目录 项目名称 项目背景 项目目标 项目成果 我的角色与职责 我主要完成的工作内容 本次项目涉及的技术 本次项目遇到的问题与解决方法 本次项目中可能被面试官问到的问题 问题1&#xff1a;项目周期是多久&#xff1f; 问题2&#xff1a;服务器部署架构方式及数量配置…
阅读更多...
golang语言的gofly快速开发框架如何设置多样的主题说明

golang语言的gofly快速开发框架如何设置多样的主题说明

本节教大家如何用gofly快速开发框架后台内置设置参数&#xff0c;配置出合适项目的布局及样式、主题色&#xff0c;让你您的项目在交互上加分&#xff0c;也是能帮你在交付项目时更容易得到客户认可&#xff0c;你的软件使用客户他们一般都是不都技术的&#xff0c;所以当他们拿…
阅读更多...
JAVAEE之文件IO_数据流概念，字节流：InputStream、OutputStream，字符流：reader、writer，及实例代码

JAVAEE之文件IO_数据流概念，字节流：InputStream、OutputStream，字符流：reader、writer，及实例代码

什么是数据流 顾名思义&#xff0c;I 表示input&#xff0c;O 表示output&#xff0c;也就是输入输出流&#xff0c;主要是在程序与文件之间&#xff0c;用于传输数据的通道。既然要传输数据&#xff0c;那么我们需要理解文件和程序之间哪种方向的传输是输入流&#xff0c;哪种…
阅读更多...
ros2 launch gazebo_ros gazebo.launch.py无法启动

ros2 launch gazebo_ros gazebo.launch.py无法启动

现象&#xff1a; 我的系统是ubuntu22.04&#xff0c;ros2的版本是humble&#xff0c;当运行os2 launch gazebo_ros gazebo.launch.py命令&#xff0c;会卡死在第六行&#xff0c;gazebo也不会打开但最后单独使用gazebo则可以打开 原因&#xff1a; 没有设置环境变量 解决办法 …
阅读更多...
免费，C++蓝桥杯等级考试真题--第2级

免费，C++蓝桥杯等级考试真题--第2级

C蓝桥杯等级考试真题–第2级
阅读更多...
开源硬件初识——Orange Pi AIpro（8T）

开源硬件初识——Orange Pi AIpro（8T）

开源硬件初识——Orange Pi AIpro&#xff08;8T&#xff09; 大抵是因为缘&#xff0c;妙不可言地就有了这么一块儿新一代AI开发板&#xff0c;乐于接触新鲜玩意儿的小火苗噌一下就燃了起来。 还没等拿到硬件&#xff0c;就已经开始在Orange Pi AIpro 官网上查阅起资料&…
阅读更多...
Aws CodeCommit代码仓储库

Aws CodeCommit代码仓储库

1 创建IAM用户 IAM创建admin用户&#xff0c;增加AWSCodeCommitFullAccess权限 2 创建存储库 CodePipeline -> CodeCommit -> 存储库 创建存储库 3 SSH 1) window环境 3.1.1 上载SSH公有秘钥 生成SSH秘钥ID 3.1.2 编辑本地 ~/.ssh 目录中名为“config”的 SSH 配置文…
阅读更多...
ARM32开发——第一盏灯

ARM32开发——第一盏灯

&#x1f3ac; 秋野酱&#xff1a;《个人主页》 &#x1f525; 个人专栏:《Java专栏》《Python专栏》 ⛺️心若有所向往,何惧道阻且长 文章目录 开发流程需求分析项目新建代码编写GPIO初始化 程序编译程序烧录烧录扩展&#xff08;熟悉&#xff09;官方烧录器烧录&#xff08;…
阅读更多...
Java过滤特殊空格nbsp；

Java过滤特殊空格nbsp；

现象&#xff1a; 用Java处理excel文件中的以下字符串时&#xff0c;想去除此空格&#xff0c;却发现用String.trim()没有直到预期效果&#xff1a; 原因&#xff1a; 在网上找了下&#xff0c;应该是这其实是html中经常使用的一种特殊空格字符&nbsp&#xff1b; 处理&a…
阅读更多...
LabVIEW调用外部DLL（动态链接库）

LabVIEW调用外部DLL（动态链接库）

LabVIEW调用外部DLL&#xff08;动态链接库&#xff09; LabVIEW调用外部DLL&#xff08;动态链接库&#xff09;可以扩展其功能&#xff0c;使用外部库实现复杂计算、硬件控制等任务。通过调用节点&#xff08;Call Library Function Node&#xff09;配置DLL路径、函数名称和…
阅读更多...
C/C++ 进阶（4）二叉搜索树

C/C++ 进阶（4）二叉搜索树

个人主页&#xff1a;仍有未知等待探索-CSDN博客 专题分栏&#xff1a;C 一、概念 二叉搜索树&#xff0c;又称二叉排序树&#xff08;中序是有序的&#xff09;。 性质 1、非空左子树的键值小于根节点的键值 2、非空右子树的键值大于根节点的键值 &#xff08;空树也是二叉搜…
阅读更多...
变压器励磁涌流MATLAB仿真模型

变压器励磁涌流MATLAB仿真模型

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 变压器励磁涌流的产生机理 1、变压器是电力系统的关键部分&#xff0c;在实际的 运行中&#xff0c;变压器需要进行相应的充电&#xff0c;而在充电的过 程中&#xff0c;就需要进行开合闸作业。在开合闸作业…
阅读更多...
智慧楼宇：城市生活的新篇章

智慧楼宇：城市生活的新篇章

在城市的喧嚣与繁华中&#xff0c;楼宇不仅是我们工作与生活的场所&#xff0c;更是智慧科技发展的前沿阵地。当传统的建筑遇上智慧的火花&#xff0c;便诞生了令人瞩目的智慧楼宇。 山海鲸可视化搭建的智慧楼宇数字孪生系统 一、智慧楼宇&#xff0c;定义未来生活 智慧楼宇不…
阅读更多...
最新文章

Copyright @ 2022~2023