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

2024-05-05 01:04

本文主要是介绍初识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)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/960484

相关文章

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分

MySql中的数据库连接池详解

《MySql中的数据库连接池详解》:本文主要介绍MySql中的数据库连接池方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录mysql数据库连接池1、概念2、为什么会出现数据库连接池3、原理4、数据库连接池的提供商5、DataSource数据源6、DBCP7、C

Spring-AOP-ProceedingJoinPoint的使用详解

《Spring-AOP-ProceedingJoinPoint的使用详解》:本文主要介绍Spring-AOP-ProceedingJoinPoint的使用方式,具有很好的参考价值,希望对大家有所帮... 目录ProceedingJoinPoijsnt简介获取环绕通知方法的相关信息1.proceed()2.g

一文详解kafka开启kerberos认证的完整步骤

《一文详解kafka开启kerberos认证的完整步骤》这篇文章主要为大家详细介绍了kafka开启kerberos认证的完整步骤,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、kerberos安装部署二、准备机器三、Kerberos Server 安装1、配置krb5.con

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.

Python使用DeepSeek进行联网搜索功能详解

《Python使用DeepSeek进行联网搜索功能详解》Python作为一种非常流行的编程语言,结合DeepSeek这一高性能的深度学习工具包,可以方便地处理各种深度学习任务,本文将介绍一下如何使用P... 目录一、环境准备与依赖安装二、DeepSeek简介三、联网搜索与数据集准备四、实践示例:图像分类1.

StarRocks数据库详解(什么是StarRocks)

《StarRocks数据库详解(什么是StarRocks)》StarRocks是一个高性能的全场景MPP数据库,支持多种数据导入导出方式,包括Spark、Flink、Hadoop等,它采用分布式架构,... 目录StarRocks介绍什么是StarRocks?StarRocks适合什么场景?StarRock

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》:本文主要介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示,详细内容请阅读本文,希望能对你有所帮助... 效

Python中__new__()方法适应及注意事项详解

《Python中__new__()方法适应及注意事项详解》:本文主要介绍Python中__new__()方法适应及注意事项的相关资料,new()方法是Python中的一个特殊构造方法,用于在创建对... 目录前言基本用法返回值单例模式自定义对象创建注意事项总结前言new() 方法在 python 中是一个