利用ES6模块及setup实现vue3组件间数据共享

最新推荐文章于 2024-09-01 16:09:02 发布

John_Cooper

最新推荐文章于 2024-09-01 16:09:02 发布

阅读量948

点赞数 2

文章标签： vue.js typescript

本文链接：https://blog.csdn.net/john_cooper/article/details/112278125

版权

本文介绍了如何利用ES6模块的特性及Vue3的setup方法，实现组件之间的数据共享。通过在数据模块导出和组件中导入，确保数据在同一内存地址，简化了组件间的通信。在ComponentA和ComponentB组件中，通过点击事件更新验证码，展示了这种方法的灵活性和便利性。相比Vue2，Vue3的这种方式更加简单易用。

摘要由CSDN通过智能技术生成

首先要明确ES6模块的一个特性，当我们利用export导出和import引入时，实际上的引入和导出都指向了同一个内存地址，这样我们就可以利用这一点很方便的实现组件间的数据共享，并且不牵扯组件关系，这也是我初学vue3的灵感迸发。不罗嗦直接上代码：

base64.ts 数据模块

import {
    Ref, ref } from 'vue'
import {
    fetchData } from './fetch-config' //自己配置的一个fetch，添加了一些请求头的配置

const base64: Ref<string> = ref<string>('') //组件间共享的数据，用来显示验证码

function getCodeImage() {
   
  fetchData(`/api/sys/randomImage/${