vue3组件通信与props

news2025/1/21 18:55:52

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的验证机制确保了组件接收到的数据是符合预期格式的，增加了组件的稳定性。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

最佳 Mac 数据恢复：恢复 Mac 上已删除的文件

最佳 Mac 数据恢复：恢复 Mac 上已删除的文件

尝试过许多 Mac 数据恢复工具&#xff0c;但发现没有一款能达到宣传的效果&#xff1f;我们重点介绍最好的 Mac 数据恢复软件 没有 Mac 用户愿意担心数据丢失&#xff0c;但您永远不知道什么时候会发生这种情况。无论是意外删除 Mac 上的重要文件、不小心弄湿了 Mac、感染病毒…
阅读更多...
模型 STORY评估框架

模型 STORY评估框架

说明&#xff1a;系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_思维模型目录。故事五要素&#xff1a;结构、时间、观点、现实、收益 。 1 STORY评估框架的应用 1.1 STORY模型展示其个性化在线学习解决方案的优势 一家在线教育平台想要通过一个故事来展示其个性…
阅读更多...
【高校科研前沿】南大王栋、吴吉春教授团队在深度学习助力水库生态调度和优化管理方面取得新进展，成果以博士生邱如健为一作发表于水环境领域国际权威期刊

【高校科研前沿】南大王栋、吴吉春教授团队在深度学习助力水库生态调度和优化管理方面取得新进展，成果以博士生邱如健为一作发表于水环境领域国际权威期刊

1.文章简介 论文名称&#xff1a;Integration of deep learning and improved multi-objective algorithm to optimize reservoir operation for balancing human and downstream ecological needs 第一作者及单位&#xff1a;邱如健&#xff08;博士生 南京大学&#xff09;…
阅读更多...
在Android Studio中使用谷歌Gemini代码助手

在Android Studio中使用谷歌Gemini代码助手

今天在做android开发的时候&#xff0c;一个项目使用到了gradle8.0&#xff0c;但是我的Android Studuio根本不支持&#xff0c;无可奈何只能从小蜜蜂版本升级了水母 | 2023.3.1版本&#xff0c;但突然发现AS已经集成了Gemini助手。 首先我们需要下载这个版本的&#xff1a; h…
阅读更多...
【Unity脚本】使用脚本操作游戏对象的组件

【Unity脚本】使用脚本操作游戏对象的组件

【知识链】Unity -> Unity脚本 -> 游戏对象 -> 组件 【知识链】Unity -> Unity界面 -> Inspector【摘要】本文介绍如何使用脚本添加、删除组件&#xff0c;以及如何访问组件 文章目录 引言第一章 游戏对象与组件1.1什么是组件&#xff1f;1.2 场景、游戏对象与组…
阅读更多...
分形之科赫雪花

分形之科赫雪花

前言 分形是一种具有自相似性的几何图形或数学对象。它的特点是无论在任何放大或缩小的尺度下，都能够看到与整体相似的图形。分形的形状可以非常复杂，常常具有分支、重复的图案，以及细节层次丰富的结构。 分形在自然界中广泛存在，如云朵、树枝、山脉、海岸线等，它们都展…
阅读更多...
jpom ruoyi 发布后端

jpom ruoyi 发布后端

添加ssh 添加标签 添加仓库 添加构建 构建 命令 APP_NAMEenterprise IMAGE_NAMEenterprise:latest APP_PORT8080 RUN_ENVjenkins cd ruoyi-admin docker stop $APP_NAME || true docker rm $APP_NAME || true docker rmi $IMAGE_NAME || true docker build -f Dockerfil…
阅读更多...
【Linux基础】Linux了解、安装centos虚拟机

【Linux基础】Linux了解、安装centos虚拟机

【Linux基础】Linux了解、安装centos虚拟机 文章目录 【Linux基础】Linux了解、安装centos虚拟机1、什么是Linux2、Linux安装2.1、使用VMware安装Linux centos72.2、启动虚拟机安装 1、什么是Linux Linux是一套免费使用和自由传播的操作系统。说到操作系统&#xff0c;大家比较…
阅读更多...
Spring boot 集成thymeleaf

Spring boot 集成thymeleaf

Spring boot 集成thymeleaf 背景 自己通过Spring boot集成通义千问实现了一个智能问答系统。Spring boot集成通义千问已经完成&#xff0c;现在需要做一个简单的页面展示&#xff0c;作为一个八年没有摸过前端的后端开发人员&#xff0c;不得不又拿起了html和thymeleaf。 Sp…
阅读更多...
指纹浏览器大全

指纹浏览器大全

具体请前往&#xff1a;国内外指纹浏览器大全
阅读更多...
博士毕业论文/CTEX/LATEX

博士毕业论文/CTEX/LATEX

LATEX环境安装 CTEX 安装 &#xff08;垃圾&#xff0c;不要装&#xff09; 运行 clean.batcomp.bat 缺少字体 Couldn’t find Adobe Heiti S.cfg’ miktex-maketfm: No creation rule for font “Adobe Heiti Std”.解决方法&#xff1a;其实就是下载这四个字体之后&…
阅读更多...
Linuxftp服务002本地登入

Linuxftp服务002本地登入

本期主要讲述的是ftp服务中的本地用户登入。 操作系统 CentOS Stream 9 操作步骤 首先我们先建立一个ftp组的用户&#xff0c;并设置密码。 [rootlocalhost ~]# useradd -g ftp wq [rootlocalhost ~]# echo 1 |passwd --stdin wq 更改用户 wq 的密码 。 passwd&#xff1a…
阅读更多...
DataCube 漏洞小结

DataCube 漏洞小结

在这里分享一下通过拖取 DataCube 代码审计后发现的一些漏洞&#xff0c;包括前台的文件上传&#xff0c;信息泄露出账号密码&#xff0c;后台的文件上传。当然还有部分 SQL 注入漏洞&#xff0c;因为 DataCube 采用的是 SQLite 的数据库&#xff0c;所以SQL 注入相对来说显得就…
阅读更多...
Qt 窗口

Qt 窗口

在Qt Creator 中创建项目的时候&#xff0c;我们能够选择创建QMainWindow 还是 QWidget 两种窗口。 二者有什么区别呢&#xff1f;其中 QMainWindow 是一种主窗口&#xff0c;包含菜单栏&#xff0c;工具栏&#xff0c;状态栏&#xff0c;中心窗口和浮动窗口等多个窗口组合&…
阅读更多...
木叶飞舞之【机器人ROS2】篇章_第三节、给turtlebot3安装realsense深度相机

木叶飞舞之【机器人ROS2】篇章_第三节、给turtlebot3安装realsense深度相机

我们做视觉slam时会用到深度相机&#xff0c;但是gazebo的turtlebot3中只有rgb相机&#xff0c;没有深度&#xff0c;因此本节会修改代码&#xff0c;来给我们的小乌龟增加一个rgbd相机。 效果展示 发布topic如下图 图片大小都是640*480 1. 修改model.sdf文件 1.1 路径位置…
阅读更多...
Java后端模拟面试 题集⑤

Java后端模拟面试 题集⑤

1.先作个自我介绍吧 面试官您好&#xff0c;我叫张睿超&#xff0c;来自湖南长沙&#xff0c;大学毕业于湖南农业大学&#xff0c;是一名智能科学与技术专业的统招一本本科生。今天主要过来面试贵公司的Java后端开发工程师岗位。 大学里面主修的课程是Java、Python、数字图像…
阅读更多...
前端Vue小兔鲜儿电商项目实战Day03

前端Vue小兔鲜儿电商项目实战Day03

一、Home - 整体结构搭建和分类实现 1. 页面结构 ①按照结构新增5个组件&#xff0c;准备最简单的模板&#xff0c;分别在Home模块的入口组件中引入 src/views/Home/components/ HomeCategory.vue HomeBanner.vue HomeNew.vue HomeHot.vue HomeProduct.vue <script …
阅读更多...
你认识nginx吗，nginx是做什么的，nginx可以做什么 --1）nginx介绍

你认识nginx吗，nginx是做什么的，nginx可以做什么 --1）nginx介绍

一.Nginx 介绍 Nginx&#xff08;发音同engine x&#xff09;是一个异步框架的 Web 服务器&#xff0c;也可以用作反向代理&#xff0c;负载平衡器 和 HTTP 缓存。该软件由 Igor Sysoev 创建&#xff0c;并于2004年首次公开发布。同名公司成立于2011年&#xff0c;以提供支持。…
阅读更多...
CraftCMS ConditionsController.php 代码执行漏洞（CVE-2023-41892）

CraftCMS ConditionsController.php 代码执行漏洞（CVE-2023-41892）

0x01 产品简介 Craft CMS是一个开源的内容管理系统，它专注于用户友好的内容创建过程，逻辑清晰明了，是一个高度自由，高度自定义设计的平台吗，可以用来创建个人或企业网站也可以搭建企业级电子商务系统。 0x02 漏洞概述 Craft CMS在4.4.15版本之前存在远程代码执行漏洞，…
阅读更多...
Java——String类

Java——String类

1.String常用方法 1.1三种常用构造方法 1. String s1"hello";2. String s2new String("world");3. char []str{h,e,l,l,o, ,w,o,r,l,d};String s3new String(str); 1.2String对象的比较 比较 对于内置类型来说&#xff0c;“”比较…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023