深度解析Vue.js组件间的通信方式

news/2024/7/20 17:19:22/文章来源:https://blog.csdn.net/A1215383843/article/details/139272743

Vue.js 组件通信主要通过以下几种方式来实现:

Props(属性)

  • 方向:父组件到子组件
  • 用途:父组件通过属性向子组件传递数据。
  • 特性:
    • 只读:默认情况下,子组件不能改变props的值。
    • 验证:可以通过props选项定义验证规则。
    • 动态:props的值可以随父组件状态的变化而变化。
父组件(Parent.vue)
<template><div><ChildComponent :message="parentMessage" /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},data() {return {parentMessage: 'Hello from Parent'};}
};
</script>
子组件(ChildComponent.vue)
<template><div><p>{{ message }}</p></div>
</template><script>
export default {props: {message: String}
};
</script>

$emit(事件)

  • 方向:子组件到父组件
  • 用途:子组件通过触发自定义事件来通知父组件。
  • 特性:
    • 传递数据:事件可以携带数据。
    • 多个事件:子组件可以触发多个不同的事件。
子组件(ChildComponent.vue)
<template><button @click="notifyParent">Notify Parent</button>
</template><script>
export default {methods: {notifyParent() {this.$emit('child-event', 'Hello from Child');}}
};
</script>
父组件(Parent.vue)
<template><ChildComponent @child-event="handleChildEvent" />
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},methods: {handleChildEvent(data) {console.log('Received data from child:', data);}}
};
</script>

Vuex

  • 全局状态管理
  • 用途:用于管理整个应用的状态,任何组件都可以访问。
  • 特性:
    • State:存储全局状态。
    • Mutations:唯一改变state的方式,同步操作。
    • Actions:用于异步操作,可以派发mutations。
    • Getters:计算属性,基于state创建缓存的属性。
    • Modules:大型应用中可以分割状态管理模块。
首先,设置 Vuex Store:

store.js

import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({state: {sharedCounter: 0},mutations: {increment(state) {state.sharedCounter++;}},actions: {incrementAsync({ commit }) {setTimeout(() => {commit('increment');}, 1000);}},getters: {getCounter: state => state.sharedCounter}
});

主应用(main.js)

确保应用使用了 Vuex Store

import Vue from 'vue';
import App from './App.vue';
import store from './store';new Vue({store,render: h => h(App)
}).$mount('#app');
父/子组件使用 Vuex

可以在任何组件中通过 this.$store 访问 Vuex Store

ComponentUsingVuex.vue

<template><div><p>Counter: {{ counter }}</p><button @click="increment">Increment</button><button @click="incrementAsync">Increment Async</button></div>
</template><script>
export default {computed: {counter() {return this.$store.getters.getCounter;}},methods: {increment() {this.$store.commit('increment');},incrementAsync() {this.$store.dispatch('incrementAsync');}}
};
</script>

Provide/Inject

  • 跨级通信
  • 用途:允许祖先组件提供数据,后代组件注入数据,无需依赖父组件层级。
  • 特性:
    • 不受组件层次限制,但可能导致代码耦合度增加。
    • 不推荐在常规组件通信中广泛使用,更适合库或框架级别的数据传递。
祖先组件(AncestorComponent.vue)
<template><div><ChildComponent /></div>
</template><script>
export default {provide() {return {ancestorValue: 'Value from Ancestor'};}
};
</script>
后代组件(DescendantComponent.vue)
<template><div><p>Value from Ancestor: {{ injectedValue }}</p></div>
</template><script>
export default {inject: ['ancestorValue'],mounted() {console.log('Injected value:', this.injectedValue);}
};
</script>

Ref 和 v-model

  • 直接引用
  • 用途:父组件直接引用子组件实例,或双向数据绑定。
  • 特性:
    • Refs:用于获取子组件实例或DOM元素,进行直接操作。
    • v-model:用于双向数据绑定,常见于表单元素,也可以应用于自定义组件。
父组件(ParentComponent.vue)
<template><ChildComponent ref="childRef" v-model="parentValue" /><button @click="logChildRef">Log Child Ref</button>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},data() {return {parentValue: 'Initial Value'};},methods: {logChildRef() {console.log(this.$refs.childRef);}}
};
</script>
子组件(ChildComponent.vue)
<template><input :value="value" @input="$emit('input', $event.target.value)" />
</template><script>
export default {props: ['value']
};
</script>

Custom Events(自定义事件)

  • 事件通信
  • 用途:自定义事件允许组件间非标准的通信。
  • 特性:
    • 可以在任何组件之间触发和监听。
    • 适用于特定的交互或组件间的复杂通信。
子组件(ChildComponent.vue)
<template><button @click="customEvent">Send Custom Event</button>
</template><script>
export default {methods: {customEvent() {this.$emit('custom-event', 'Data to send');}}
};
</script>
父组件(ParentComponent.vue)
<template><ChildComponent @custom-event="handleCustomEvent" />
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},methods: {handleCustomEvent(data) {console.log('Received custom event data:', data);}}
};
</script>

Slots(插槽)

  • 内容分发
  • 用途:允许父组件的内容插入到子组件的特定位置。
  • 特性:
    • 默认插槽:子组件的默认内容区域。
    • 具名插槽:子组件可以定义多个插槽,父组件指定插入内容的位置。
    • 作用域插槽:父组件可以访问子组件的数据来决定插槽内容。
父组件(ParentComponent.vue)
<template><WrapperComponent><h1 slot="header">Custom Header</h1><p slot="body">Custom Body Content</p></WrapperComponent>
</template><script>
import WrapperComponent from './WrapperComponent.vue';export default {components: {WrapperComponent}
};
</script>
WrapperComponent.vue
<template><div><slot name="header"></slot><div class="content"><slot name="body"></slot></div></div>
</template>

Composition API(组合API)

  • 新功能
  • 用途:Vue 3引入的新特性,允许在组件内更好地组织逻辑和数据。
  • 特性:
    • setup() 函数:在组件生命周期开始时运行,可以访问props和触发生命周期钩子。
    • refreactive:用于响应式数据管理。
    • provideinject:在组合API中也有相应的实现,更灵活地进行跨组件数据传递。
父组件(ParentComponent.vue)
<template><ChildComponent :count="count" @updateCount="updateCount" />
</template><script>
import { ref, onMounted } from 'vue';
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},setup() {const count = ref(0);function updateCount(newCount) {count.value = newCount;}onMounted(() => {console.log('Initial count:', count.value);});return {count,updateCount};}
};
</script>
子组件(ChildComponent.vue)
<template><button @click="increment">Increment</button>
</template><script>
import { ref, emit } from 'vue';export default {props: ['count'],setup(props) {const count = ref(props.count);function increment() {count.value++;emit('updateCount', count.value);}return {count,increment};}
};
</script>

2500G计算机入门到高级架构师开发资料超级大礼包免费送!

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

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Day06-Mybatis

1. Mybatis介绍 2. Mybatis连接数据库并返回数据事例 连接oracle数据的设置方式 spring.application.namespringboot-mybatis spring.datasource.driver-class-nameoracle.jdbc.OracleDriver spring.datasource.urljdbc:oracle:thin:192.168.100.66:1521:orcl spring.datasour…

IDEA升级web项目为maven项目乱码

今天将一个java web项目改造为maven项目。 首先&#xff0c;创建一个新的maven项目&#xff0c;将文件拷贝到新项目中。 其次&#xff0c;将旧项目的jar包&#xff0c;在maven的pom.xml做成依赖 接着&#xff0c;把没有maven坐标的jar包在编译的时候也包含进来 <build>…

redis数据类型之string,list

华子目录 key操作说明SCAN cursor [MATCH pattern] [COUNT count]dump与restorekeys 通配符 示例演示 string说明setbit key offset valuegetbit key offsetsetrange key offset value List结构图相关命令lrem key count valueltrim key count value示例&#xff1a;使用 LTRIM…

从alpine构建预装vcpkg的docker image用于gitea actions CI

动机 想要构建一个基于vcpkg的交叉编译容器平台用于cpp项目的CI&#xff08;自动集成&#xff09;&#xff0c;此处仅提供最基础的image&#xff0c;amd64的机子上构建完成后大小为533兆&#xff08;着实不小&#x1f613;&#xff09;&#xff0c;各位看官可以在此基础上自行…

性能测试(一)—— 性能测试理论+jmeter的使用

1.性能测试介绍 定义&#xff1a;软件的性能是软件的一种非功能特性&#xff0c;它关注的不是软件是否能够完成特定的功能&#xff0c;而是在完成该功能时展示出来的及时性。 由定义可知性能关注的是软件的非功能特性&#xff0c;所以一般来说性能测试介入的时机是在功能测试完…

Jetson Orin Nano v6.0 + tensorflow2.15.0+nv24.05 GPU版本安装

Jetson Orin Nano v6.0 tensorflow2.15.0nv24.05 GPU版本安装 1. 源由2. 步骤2.1 Step1&#xff1a;系统安装2.2 Step2: nvidia-jetpack安装2.3 Step3&#xff1a;jtop安装2.4 Step4&#xff1a;h5py安装2.5 Step5&#xff1a;tensorflow安装2.6 Step6&#xff1a;jupyterlab安…

SpringBoot——数据访问

优质博文&#xff1a;IT-BLOG-CN 对于数据访问层&#xff0c;无论是 SQL 还是 NoSQL&#xff0c;SpringBoot 默认采用整合 Spring Data 的方式进行统一处理&#xff0c;添加大量自动配置&#xff0c;屏蔽了很多设置。引入各种 xxxTemplate&#xff0c;xxxRepository 来简化我…

2024年上半年软件系统架构师考试【回忆版】

文章目录 考试时间考试地点综合知识案例分析1、微服务架构的优点和缺点2、质量属性的6个要素3、分布式锁 Redis的缺点4、MongoDB 存储矢量图的优势 论文回忆版论文一、论单元测试的设计与应用论文二、论大数据模型的设计与应用论文三、论模型驱动的架构设计及应用论文四、论云自…

Spring Boot中如何查询PGSQL分表后的数据

数据库用的pgsql&#xff0c;在表数据超过100w条的时候执行定时任务进行了分表&#xff0c;分表后表名命名为原的表名后面拼接时间&#xff0c;如原表名是card_device_trajectory_info&#xff0c;分表后拼接时间后得到card_device_trajectory_info_20240503&#xff0c;然后分…

量子密钥分发系统基础器件(一):光纤干涉仪

干涉仪的基本原理是利用波的叠加来获得波的相位信息&#xff0c;从而获取实验中所关心的物理量。光纤干涉仪是由光学干涉仪发展而来的&#xff0c;利用光纤实现光的干涉&#xff0c;由于光纤取代透镜系统构成的光路具有柔软、形状可随意变化、传输距离远等特点&#xff0c;当前…

RT-DETR算法改进【NO.1】借鉴CVPR2024中的StarNet网络StarBlock改进算法

前 言 YOLO算法改进的路有点拥挤,尝试选择其他的baseline作为算法研究,可能会更加好发一些文章。后面将陆续介绍RT-DETR算法改进的方法思路。 很多朋友问改进如何选择是最佳的,下面我就根据个人多年的写作发文章以及指导发文章的经验来看,按照优先顺序进行排序讲解…

HTML静态网页成品作业(HTML+CSS)——动漫熊出没介绍网页(3个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有3个页面。 二、作品演示 三、代…

如何使用git上传linux下的项目!---附带每一步截图

在实际项目中&#xff0c;我们需要把自己的模块递给GitHub&#xff0c;需要别人的模块的时候拉下来&#xff0c;那么我们怎么把自己的项目递给GitHub呢&#xff1f;下面做一个总结&#xff1a; 登录GitHub 创建一个仓库 填写相关信息 项目名称是必填的&#xff0c;项目描述可以…

09Django项目--用户管理系统--删

对应视频链接点击直达 09Django项目--用户管理系统--删 对应视频链接点击直达删a&#xff0c;本质b&#xff0c;删除 页面相关a&#xff0c;index页面新增操作按钮b&#xff0c;ajax删除和提示c&#xff0c;完整版本 OVER&#xff0c;不会有人不会吧不会的加Q1394006513结语 一…

冯喜运:5.29市场避险情绪升温,黄金原油小幅收涨

【黄金消息面分析】&#xff1a;周二&#xff08;5月28日&#xff09;美盘时段&#xff0c;由于美元走弱且市场情绪出现负面变化&#xff0c;黄金收复早前跌幅&#xff0c;站上2350美元关口。金价早盘一度走弱&#xff0c;源于美联储降息可能性降低带来压力&#xff0c;投资者在…

(四十八)第 7 章 图(图的数组(邻接矩阵)存储)

1. 背景说明 2. 示例代码 1) errorRecord.h // 记录错误宏定义头文件#ifndef ERROR_RECORD_H #define ERROR_RECORD_H#include <stdio.h> #include <string.h> #include <stdint.h>// 从文件路径中提取文件名 #define FILE_NAME(X) strrchr(X, \\) ? strrch…

关于已配好java环境但双击无法打开jar包的解决方案

如果你已经装好了 java 环境直接跳到最后看解决方法即可 先说一下你安装的 java 环境&#xff0c;如果完全是默认选项安装&#xff0c;则会安装 jdk 和 jre&#xff0c;并且在安装 jre 时还需要安装目录下为空&#xff0c;其实 jre 的安装是多余的&#xff0c;因为安装的 jdk 里…

LES物流执行系统,在离散制造行业有那些作用和价值?

离散制造企业往往面临的是多品种、小批量的非标订单生产&#xff0c;传统推动式物流系统已经无法应对计划变化滞后&#xff0c;各车间、工序之间难以衔接等情况&#xff0c;特别是密集劳动力的电子行业&#xff0c;非标产品 SKU 种类繁多&#xff0c;物料配送复杂&#xff0c;对…

Sentinel-2 哨兵二号数据介绍及下载

1 Sentinel-2简介 SENTINEL-2 is a European wide-swath, high-resolution, multi-spectral imaging mission. Sentinel-2 是高分辨率多光谱成像卫星&#xff0c;一颗卫星的重访周期为10天&#xff0c;两颗互补&#xff0c;重访周期为5天。分为2A和2B两颗卫星。2A于2015年6月…

【ubuntu20】--- 定时同步文件

在编程的艺术世界里&#xff0c;代码和灵感需要寻找到最佳的交融点&#xff0c;才能打造出令人为之惊叹的作品。而在这座秋知叶i博客的殿堂里&#xff0c;我们将共同追寻这种完美结合&#xff0c;为未来的世界留下属于我们的独特印记。 【Linux命令】--- 多核压缩命令大全&…