当前位置: 首页 > news >正文

初识Vue-组件通信(详解props和emit)

目录

一、组件通信介绍

1.概念

2.作用

3.特点

4.应用

二、组件通信语法

1.Props

1.1.在子组件中声明 props

1.2.在父组件中传递数据

2.Emit

2.1.在子组件中触发事件

2.2.在父组件中监听事件

三、应用实例

1. 购物车组件

2. 表单数据处理

 四、总结


一、组件通信介绍

1.概念

在组件化开发中,一个应用程序通常由多个组件组成。这些组件可能位于不同的层级,有不同的作用和责任。组件通信就是让这些组件之间能够相互交流、传递数据、共享状态或触发行为的机制。

2.作用

  1. 传递数据: 父组件可以通过props向子组件传递数据,子组件可以通过emit触发事件向父组件发送消息。
  2. 共享状态: 多个组件之间可以共享同一份状态数据,确保数据的一致性。
  3. 触发行为: 组件之间可以通过事件触发行为,实现交互功能。
  4. 管理全局状态: 使用状态管理工具(如Vuex)进行全局状态的管理和同步。

3.特点

  1. 解耦性: 组件通信可以将各个组件解耦,使它们能够独立开发、测试和维护。
  2. 灵活性: 可以根据具体需求选择不同的通信方式,如props / emit、$emit / $on、Vuex等,从而灵活应对各种场景。
  3. 可重用性: 合理的组件通信设计可以增强组件的可重用性,提高开发效率。
  4. 状态管理: 可以通过组件通信实现状态的管理,让不同组件共享同一份状态数据。

4.应用

  1. 父子组件通信: 通过props和emit实现父子组件之间的通信,传递数据和触发事件。
  2. 兄弟组件通信: 通过共同的父组件或使用事件总线(如Vue的$emit / $on或自定义事件总线)实现兄弟组件之间的通信。
  3. 跨层级通信: 使用事件总线或状态管理工具(如Vuex)实现跨层级组件之间的通信。
  4. 全局状态管理: 使用状态管理工具(如Vuex)管理应用程序的全局状态,确保各个组件之间的状态同步和一致性。

二、组件通信语法

1.Props

Props 是一种机制,用于父组件向子组件传递数据。子组件通过在其标签上声明 props 来接收来自父组件的数据。在父组件中,可以使用子组件标签上的属性来传递数据。

1.1.在子组件中声明 props
<script>
export default {props: ['message']
};
</script>
1.2.在父组件中传递数据
<ChildComponent message="Hello from parent" />

2.Emit

Emit 是一种机制,用于子组件向父组件发送消息或数据。子组件通过调用 emit 方法触发一个事件,并传递需要发送的数据。父组件通过在子组件标签上监听事件来接收数据。

2.1.在子组件中触发事件
<script>
export default {methods: {sendMessage() {this.$emit('notify', 'Hello from child');}}
};
</script>
2.2.在父组件中监听事件
<ChildComponent @notify="handleNotify" />

这样,父组件就可以在 handleNotify 方法中接收来自子组件的消息了。

三、应用实例

1. 购物车组件

父组件:商品列表组件

<template><div><ProductItem v-for="product in products" :key="product.id" :product="product" @remove="removeProduct" /><ShoppingCart :items="cartItems" @checkout="checkout" /></div>
</template><script>
import ProductItem from './ProductItem.vue';
import ShoppingCart from './ShoppingCart.vue';export default {components: {ProductItem,ShoppingCart},data() {return {products: [...], // 商品列表数据cartItems: []   // 购物车中的商品列表};},methods: {removeProduct(productId) {// 从购物车中移除商品this.cartItems = this.cartItems.filter(item => item.id !== productId);},checkout() {// 处理结账逻辑// 可以向后端提交订单数据等}}
};
</script>

子组件:购物车组件

<template><div><div v-for="item in items" :key="item.id"><span>{{ item.name }}</span><button @click="removeItem(item.id)">Remove</button></div><button @click="checkout">Checkout</button></div>
</template><script>
export default {props: ['items'],methods: {removeItem(itemId) {this.$emit('remove', itemId); // 触发从购物车中移除商品的事件},checkout() {this.$emit('checkout'); // 触发结账事件}}
};
</script>

2. 表单数据处理

父组件:表单组件

<template><div><InputField v-model="formData.username" label="Username" /><InputField v-model="formData.password" label="Password" type="password" /><SubmitButton @submit="submitForm" /></div>
</template><script>
import InputField from './InputField.vue';
import SubmitButton from './SubmitButton.vue';export default {components: {InputField,SubmitButton},data() {return {formData: {username: '',password: ''}};},methods: {submitForm() {// 处理表单提交逻辑// 可以将 formData 发送到后端进行验证}}
};
</script>

子组件:InputField 组件

<template><div><label>{{ label }}</label><input v-model="value" :type="type" /></div>
</template><script>
export default {props: ['value', 'label', 'type'],computed: {inputValue: {get() {return this.value;},set(newValue) {this.$emit('input', newValue); // 触发输入事件,更新父组件中的 formData}}}
};
</script>

子组件:SubmitButton 组件

<template><button @click="submit">Submit</button>
</template><script>
export default {methods: {submit() {this.$emit('submit'); // 触发提交事件,通知父组件提交表单}}
};
</script>
  1. Props:

    • Props允许父组件向子组件传递数据。父组件通过Props属性将数据传递给子组件,在子组件中可以直接使用这些数据进行渲染或其他操作。
    • 在示例中,商品列表组件通过Props将商品数据传递给购物车组件,使购物车组件能够显示正确的商品信息。
  2. Emit:

    • Emit允许子组件向父组件发送消息。子组件可以使用$emit方法触发一个事件,并将需要传递给父组件的数据作为参数传递给该事件。
    • 在示例中,购物车组件通过$emit触发了“remove”和“checkout”事件,父组件可以监听这些事件并执行相应的操作,比如从购物车中移除商品或处理结账逻辑。

 四、总结

  1. Props:

    • Props 允许父组件向子组件传递数据。
    • 子组件通过 props 接收父组件传递的数据,并可以在组件内部使用这些数据。
    • 父组件使用 v-bind 指令将数据传递给子组件,并在子组件标签上使用相应的 prop 名称。
  2. Custom Events (自定义事件):

    • Custom Events 允许子组件向父组件发送消息。
    • 子组件使用 $emit 方法触发一个事件,并可以传递数据作为参数。
    • 父组件使用 v-on 指令监听子组件触发的事件,并在事件处理程序中处理数据。
  3. $emit 方法:

    • $emit 方法用于触发一个自定义事件。
    • 它接受两个参数:事件名称和要传递给事件处理程序的数据。
  4. v-model 指令:

    • v-model 指令用于在表单输入元素上创建双向数据绑定。
    • 它实质上是语法糖,结合了对值的绑定和对 input 事件的监听。
  5. $refs:

    • $refs 提供对子组件的直接访问。
    • 它可以用来访问子组件的属性和方法,但不推荐在父组件中过度使用。

相关文章:

初识Vue-组件通信(详解props和emit)

目录 一、组件通信介绍 1.概念 2.作用 3.特点 4.应用 二、组件通信语法 1.Props 1.1.在子组件中声明 props 1.2.在父组件中传递数据 2.Emit 2.1.在子组件中触发事件 2.2.在父组件中监听事件 三、应用实例 1. 购物车组件 2. 表单数据处理 四、总结 一、组件通信介…...

二叉树的前序、中序、后序遍历的C++实现

二叉树的前序、中序、后序 遍历属于深度优先搜索方式&#xff0c;本文使用递归法实现前序、中序、后序的遍历方法&#xff0c;代码如下&#xff1a; #include <iostream> #include <vector>struct TreeNode{int val;TreeNode* left;TreeNode* right;TreeNode(int …...

golang中数组array和切片slice的区别

go语言中最常用的数据结构 数组array 和 切片 slice的区别对比&#xff1a; 定义和初始化&#xff1a; 数组&#xff1a; [size]类型 切片&#xff1a; []类型 &#xff0c; 数组变量[low:high] var arr1 [3]string{"a", "b", "c"} //…...

LSM-Tree 原理分析

深入浅出分析LSM树&#xff08;日志结构合并树&#xff09; - 知乎 写得太好了&#xff0c;留下记录。便于复习。 LSM树详解 - 知乎 多了点点内容&#xff0c;也看看吧。...

【代码随想录37期】Day01 二分查找 + 移除元素

二分查找 力扣704 贴一下之前的笔记&#xff1a; 没想到一下子写不出来&#xff0c;忘记什么是二分法了&#xff0c;这里回顾一下&#xff1a; 「二分查找 binary search」是一种基于分治策略的高效搜索算法。 它利用数据的有序性&#xff0c;每轮减少一半搜索范围&#xff…...

GitPython 使用教程

GitPython 使用教程 GitPython 是一个用于与 Git 版本控制系统进行交互的 Python 库。它提供了简单的接口&#xff0c;让你可以通过 Python 代码执行 Git 命令和操作 Git 仓库。 1. 安装 GitPython 你可以使用 pip 在命令行中安装 GitPython&#xff1a; pip install gitpy…...

MATLAB 基于规则格网的点云抽稀方法(自定义实现)(65)

MATLAB 基于规则格网的点云抽稀方法(自定义实现)(65) 一、算法介绍二、算法实现1.代码2.结果一、算法介绍 海量点云的处理,需要提前进行抽稀预处理,相比MATLAB预先给出的抽稀方法,这里提供一种基于规则格网的自定义抽稀方法,步骤清晰,便于理解抽稀内涵, 主要涉及到使…...

论文阅读】 ICCV-2021-3D Local Convolutional Neural Networks for Gait Recognition

motivation :现有方法方法无法准确定位身体部位&#xff0c;不同的身体部位可以出现在同一个条纹(如手臂和躯干)&#xff0c;一个部分可以出现在不同帧(如手)的不同条纹上。其次&#xff0c;不同的身体部位具有不同的尺度&#xff0c;即使是不同帧中的同一部分也可以出现在不同…...

同一局域网如何从Windows系统拷贝文件到银河麒麟系统

1. 先将Windows下的、被拷贝文件所在文件夹设置为共享目录&#xff1a;在文件夹上单击右键选择“属性”菜单&#xff0c;弹出如下对话框&#xff1a; 按数字顺序单击鼠标左键&#xff0c;弹出如下对话框&#xff1a; 并将权限开放为Everyone&#xff0c;单击“共享”按钮。 在…...

2024年华为OD机试真题-数的分解-(C++)-OD统一考试(C卷D卷)

题目描述: 给定一个正整数n,如果能够分解为m(m > 1)个连续正整数之和,请输出所有分解中,m最小的分解。 如果给定整数无法分解为连续正整数,则输出字符串"N"。 输入描述: 输入数据为一整数,范围为(1, 2^30] 输出描述: 比如输入为: 21 输出: 21=10+11 补…...

vue-img-cutter 图片裁剪详解

前言&#xff1a;vue-img-cutter 文档&#xff0c;本文档主要讲解插件在 vue3 中使用。 一&#xff1a;安装依赖 npm install vue-img-cutter # or yarn add vue-img-cutter # or pnpm add vue-img-cutter 二&#xff1a;构建 components/ImgCutter.vue 组件 <script se…...

PCL 点云中的平面点云提取

平面点云提取 一. 索引提取1.1 算法概念1.2 算法流程1.3 主要函数二.代码示例三.结果示例一. 索引提取 1.1 算法概念 平面点云提取:是指从点云数据中提取出属于平面的点的过程。 1.2 算法流程 使用pcl::SACSegmentation类进行点云分割的基本步骤如下: 创建一个pcl::SACSegm…...

4.用python爬取保存在text中的格式为m3u8的视频

文章目录 一、爬取过程详解1.寻找视频的m3u8链接2.从网页源码中寻找视频的m3u8链接的第二部分内容3.从视频的m3u8链接获取视频 二、完整的代码 一、爬取过程详解 1.寻找视频的m3u8链接 这个文档承接了爬虫专栏的 第一节.python爬虫爬取视频网站的视频可下载的源url&#xff0…...

240503-关于Unity的二三事

240503-关于Unity的二三事 1 常用快捷键 快捷键描述CtrlP播放/停止Ctrl1打开Scene窗口Ctrl2打开Game窗口Ctrl3打开Inspect窗口Ctrl4打开Hierarchy窗口Ctrl5打开Project窗口Ctrl6打开Animation窗口 2 关联VisualStudio2022 3 节约时间&#xff1a;将最新声明的参数移动到最上…...

顺序栈的操作

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd;既然选择了远方&#xff0c;当不负青春…...

STM32 各外设GPIO配置

高级定时器TIM1/TIM8 通用定时器TIM2/3/4/5 USART SPI I2S I2C接口 BxCAN SDIO ADC/DAC 其它I/O功能...

React-hooks相关知识点总结

前言 随着函数式组件的不断流行&#xff0c;React从类式组件走上了函数式组件的时代&#xff0c;那么在新的React函数式编程中&#xff0c;hooks也成为了这个时期最广泛使用的一种方式。现在让我们总结下react hooks吧。 Hooks 是什么 react-hooks是react16.8以后&#xff0c…...

20240508日记

今天工作内容&#xff1a; 1.二号机S3点位焊接测试&#xff0c;调整位置精度。 2.一号机送针位置调整 3.自定义焊接功能测试 4.EAP服务启动测试 明日计划&#xff1a; 1.EAP流程修改功能开发 1.1 Read Barcode Complete 事件&#xff0c;上传料盘码和设备ID&#xff0c;等EA…...

Web实操(6),基础知识学习(24~)

1.[ZJCTF 2019]NiZhuanSiWei1 &#xff08;1&#xff09;进入环境后看到一篇php代码&#xff0c;开始我简单的以为是一题常规的php伪协议&#xff0c;多次试错后发现它并没有那么简单&#xff0c;它包含了基础的文件包含&#xff0c;伪协议还有反序列化 &#xff08;2&#x…...

JavaSE——方法详解

1. 方法的概念 方法就是一个代码片段 . 类似于 C 语言中的 " 函数 " 。 方法存在的意义 : 1. 是能够模块化的组织代码(当代码规模比较复杂的时候). 2. 做到代码被重复使用, 一份代码可以在多个位置使用. 3. 让代码更好理解更简单. 4. 直接调用现有方法开发, 不…...

iBarcoder for Mac:一站式条形码生成软件

在数字化时代&#xff0c;条形码的应用越来越广泛。iBarcoder for Mac作为一款专业的条形码生成软件&#xff0c;为用户提供了一站式的解决方案。无论是零售、出版还是物流等行业&#xff0c;iBarcoder都能轻松应对&#xff0c;助力用户实现高效管理。 iBarcoder for Mac v3.14…...

学习R语言第六天

文章目录 绘制图形的方式计算字符的数量的方式提取字符变量的方式根据名称查询前缀的方式转化大小写的方式大写小写的获取数据长度的方式生成一个序列的方式从1开始到10&#xff0c;每次增加2从1到3 重复2次将函数到数据框中的方式生成数据rnorm 生成30行数据,nrow是6列数据计算…...

LeetCode算法题:9. 回文数(Java解法)

给你一个整数 x &#xff0c;如果 x 是一个回文整数&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 回文数 是指正序&#xff08;从左向右&#xff09;和倒序&#xff08;从右向左&#xff09;读都是一样的整数。 例如&#xff0c;121 是回文&#xff0c…...

VALSE 2024 Workshop报告分享┆面向实际场景体验的多模态大模型DeepSeek VL

2024年视觉与学习青年学者研讨会&#xff08;VALSE 2024&#xff09;于5月5日到7日在重庆悦来国际会议中心举行。本公众号将全方位地对会议的热点进行报道&#xff0c;方便广大读者跟踪和了解人工智能的前沿理论和技术。欢迎广大读者对文章进行关注、阅读和转发。文章是对报告人…...

RFC 791 (1)-导论

目录 浅论 IP是啥 IP可以管啥 操作 范例查看 提示&#xff1a;本系列将会开始RFC文档阅读&#xff0c;这里会给出我的一些笔记 浅论 我们这篇RFC文档描述的是IP和ICMP协议&#xff0c;我们都知道&#xff0c;在传统的OSI七层或者是现在被简化的五层&#xff1a;应用层&…...

力扣hot100:199. 二叉树的右视图/437. 路径总和 III(dfs/回溯/树上前缀和/哈希表)

文章目录 一、LeetCode&#xff1a;199. 二叉树的右视图二、LeetCode&#xff1a;437. 路径总和 III 一、LeetCode&#xff1a;199. 二叉树的右视图 LeetCode&#xff1a;199. 二叉树的右视图 差点因为是个中等题打退堂鼓。其实比较简单。 右视图实际上只需要找到&#xff0c…...

浅谈 HTTPS

文章目录 HTTPS 简介HTTPS 特点HTTPS 缺点与 HTTP 的区别HTTPS 工作流程1. 服务端生成密钥对2. 服务端申请数字证书3. 服务端发送数字证书4. 客户端验证数字证书5. 客户端解析证书内容6. 客户端传送加密信息7. 服务端解密信息8. 双方协商生成会话密钥并交换9. 使用会话密钥进行…...

js手动实现unshift

js 手动实现数组的unshift unshift是什么&#xff1f; unshift() 方法可向数组的开头添加一个或更多元素&#xff0c;并返回新的长度。 注意&#xff1a; 该方法将改变数组的数目。 语法&#xff1a; array.unshift(item1,item2, ..., itemX)代码实现 首先&#xff0c;在…...

Failed to get DISPLAY: Error: All configured authentication methods failed 解决方法

Vscode一连接远程服务器就报错&#xff1a; 这个时候我们是无法使用Xming显示图像的。 尝试后发现&#xff0c;Windows电脑能够ping通服务器ip&#xff0c;但是服务器ping不通Windows电脑&#xff1a; 在网上查攻略&#xff0c;设置Windows电脑ip地址白名单&#xff0c;但…...

随便聊一下 显控科技 控制屏 通过 RS485 接口 上位机 通讯 说明

系统搭建&#xff1a; 1、自己研发的一个小系统&#xff08;采集信号&#xff0c;将采集的信号数字化&#xff09;通过COM口&#xff0c;连接显控屏 COM3 口采用 485 协议送到显控屏&#xff08;显控科技&#xff09;的显示屏展示出来&#xff09;。 2、显控屏 将 展示的数据…...