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

Vue组件通信方式及最佳实践

news 来源：原创 2025/7/1 8:56:04

1. Props / 自定义事件 (父子通信)

使用场景

父子组件直接数据传递

代码实现

<!-- Parent.vue -->
<template><Child :message="parentMsg" @update="handleUpdate" />
</template><script setup>
import { ref } from 'vue';
import Child from './Child.vue';const parentMsg = ref('Hello from Parent');
const handleUpdate = (newVal) => {parentMsg.value = newVal;
};
</script><!-- Child.vue -->
<template><div><p>{{ message }}</p><button @click="sendUpdate">Update Parent</button></div>
</template><script setup>
const props = defineProps(['message']);
const emit = defineEmits(['update']);const sendUpdate = () => {emit('update', 'New value from Child');
};
</script>

使用步骤

父组件通过 :propName 传递数据
子组件通过 defineProps 接收
子组件通过 defineEmits 声明事件
子组件通过 emit('eventName', data) 触发事件
父组件通过 @eventName 监听处理

关键点

单向数据流原则
子组件不要直接修改 props
适合层级简单场景

2. v-model / .sync (双向绑定)

使用场景

简化父子组件的双向绑定

代码实现

<!-- Parent.vue -->
<template><Child v-model:title="pageTitle" /><p>Parent value: {{ pageTitle }}</p>
</template><script setup>
import { ref } from 'vue';
import Child from './Child.vue';const pageTitle = ref('Initial Title');
</script><!-- Child.vue -->
<template><input :value="title"@input="$emit('update:title', $event.target.value)">
</template><script setup>
defineProps(['title']);
defineEmits(['update:title']);
</script>

使用步骤

父组件使用 v-model:propName 绑定
子组件接收对应 prop
子组件通过 update:propName 事件更新

关键点

Vue 3 支持多个 v-model 绑定
替代 Vue2 的 .sync 修饰符
语法糖，底层仍是 props + events

3. Event Bus (全局事件总线)

使用场景

跨组件通信（小型项目）

代码实现

// eventBus.js
import mitt from 'mitt';
export const emitter = mitt();// ComponentA.vue (发送方)
import { emitter } from './eventBus';
emitter.emit('global-event', { data: 123 });// ComponentB.vue (接收方)
import { emitter } from './eventBus';
emitter.on('global-event', (data) => {console.log('Received:', data);
});

使用步骤

创建全局事件总线实例
发送方使用 emit 触发事件
接收方使用 on 监听事件
组件销毁时使用 off 移除监听

关键点

需要手动管理事件监听
适用于简单场景
中大型项目改用状态管理

4. Provide / Inject

使用场景

跨层级组件通信

代码实现

<!-- Ancestor.vue -->
<script setup>
import { provide, ref } from 'vue';const counter = ref(0);
provide('counter', {counter,increment: () => counter.value++
});
</script><!-- Descendant.vue -->
<script setup>
import { inject } from 'vue';const { counter, increment } = inject('counter');
</script><template><button @click="increment">{{ counter }}</button>
</template>

使用步骤

祖先组件使用 provide(key, value)
后代组件使用 inject(key)
建议提供响应式数据

关键点

适合深层嵌套组件
提供响应式对象更实用
避免组件过度耦合

5. Pinia (状态管理)

使用场景

复杂应用状态管理

代码实现

// stores/counter.js
import { defineStore } from 'pinia';export const useCounterStore = defineStore('counter', {state: () => ({ count: 0 }),actions: {increment() {this.count++;}}
});// ComponentA.vue
import { useCounterStore } from './stores/counter';
const store = useCounterStore();
store.increment();// ComponentB.vue
import { useCounterStore } from './stores/counter';
const store = useCounterStore();
<p>{{ store.count }}</p>

使用步骤

定义 store
组件导入并使用 store
通过 actions 修改状态

关键点

集中式状态管理
支持 TypeScript
替代 Vuex 的现代方案

6. refs 访问组件实例

使用场景

需要直接操作子组件

代码实现

<template><ChildComponent ref="childRef" /><button @click="callChildMethod">Call Child</button>
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './Child.vue';const childRef = ref(null);const callChildMethod = () => {childRef.value.someMethod();
};
</script>

使用步骤

使用 ref 属性标记子组件
通过 ref.value 访问实例
调用子组件方法/访问属性

关键点

破坏封装性，谨慎使用
优先考虑 props/events
适合集成第三方库

对比总结表

方式	适用场景	优点	缺点
Props/Events	父子组件通信	简单直接	不适合深层嵌套
v-model	双向绑定	语法简洁	只能用于父子组件
Event Bus	跨组件通信	全局可用	难以维护事件流
Provide/Inject	跨层级通信	避免逐层传递	数据来源不透明
Pinia	复杂状态管理	集中管理可维护性强	增加项目复杂度
Refs	直接访问组件	灵活性强	破坏组件封装

通用最佳实践

简单优先原则：优先使用 Props/Events
状态共享评估：
- 父子组件 → Props
- 兄弟组件 → 状态提升到父级
- 跨层级 → Provide/Inject 或 Pinia
类型安全：使用 TypeScript 定义 Props 和事件
响应式处理：对于复杂对象使用 reactive() 或 ref()
内存管理：及时清理 Event Bus 监听器
模块化设计：Pinia Store 按功能拆分模块

Vue组件通信方式及最佳实践

1. Props / 自定义事件 (父子通信) 使用场景父子组件直接数据传递代码实现  <template><Child :message"parentMsg" update"handleUpdate" /> </template><script setup> import { ref } from vue…...

编程日记 2025/7/1 8:56:04

JUC并发编程（下）

五、共享模型之内存 JMM（java内存模型） 主存：所有线程共享的数据（静态成员变量、成员变量） 工作内存：每个线程私有的数据（局部变量） 简化对底层的控制可见性问题线程t通过r…...

编程日记 2025/7/1 8:20:35

Go语言中new与make的深度解析

在 Go 语言中，new 和 make 是两个用于内存分配的内置函数，但它们的作用和使用场景有显著区别。理解它们的核心在于： new(T): 为类型 T 分配内存，并将其初始化为零值，然后返回一个指向该内存的指针 (*T)。make(T, ar…...

编程日记 2025/6/27 22:51:24

Xilinx 7Series\UltraScale 在线升级FLASH STARTUPE2和STARTUPE3使用

一、FPGA 在线升级 FPGA 在线升级FLASH时，一般是通过逻辑生成SPI接口操作FLASH，当然也可以通过其他SOC经FPGA操作FLASH，那么FPGA就要实现在启动后对FLASH的控制。对于7Series FPGA，只有CCLK是专用引脚，SPI接口均为普…...

编程日记 2025/7/1 8:37:08

redisson-spring-boot-starter 版本选择

以下是更详细的 Spring Boot 与 redisson-spring-boot-starter 版本对应关系，按照 Spring Boot 主版本和子版本细分： 1. Spring Boot 3.x 系列 3.2.x 推荐 Redisson 版本：3.23.1（最新稳定版，兼容 Redis 7.x&#xf…...

编程日记 2025/6/27 21:14:10

QML定时器Timer和线程任务WorkerScript

定时器 Timer 属性 interval: 事件间隔毫秒repeat: 多次执行，默认只执行一次running: 定时器启动triggeredOnStart: 定时器启动时立刻触发一次事件信号 triggered(): 定时时间到，触发此信号方法 restart(): 重启定时器start(): 启动定时器stop(): 停止…...

编程日记 2025/7/1 8:10:33

Jsoup解析商品信息具体怎么写？

使用 Jsoup 解析商品信息是一个常见的任务，尤其是在爬取电商网站的商品详情时。以下是一个详细的步骤和代码示例，展示如何使用 Jsoup 解析商品信息。一、准备工作确保你的项目中已经添加了 Jsoup 依赖。如果你使用的是 Maven，可以在 pom.…...

编程日记 2025/6/27 2:18:05

jenkins数据备份

jenkins数据备份一般情况下分为两种, 1.使用crontab进行备份.这种备份方式是技术人员手动填写的备份的时候将workspace目录排除. 2.使用jenkins插件备份. 下载备份插件 ThinBackup,这里已经下载完成,如果没下载的情况下点击安装好之后重启jenkins(直接点击插件安装位置的闲…...

编程日记 2025/6/30 10:54:39

IP核警告，Bus Interface ‘AD_clk‘: ASSOCIATED_BUSIF bus parameter is missing.

创建IP核生成输出的clk信号无法在GUI（customization GUI）显示clk信号，并且出现如下2个warning： [IP_Flow 19-3153] Bus Interface AD_clk: ASSOCIATED_BUSIF bus parameter is missing. [IP_Flow 19-4751] Bus Interface AD_clk:…...

编程日记 2025/7/1 8:09:43

Nginx配置同一端口不同域名或同一IP不同端口

以下是如何在Nginx中配置同一端口不同域名，以及同一IP不同端口的详细说明： 一、同一端口不同域名（基于名称的虚拟主机） 场景： 通过80端口，让 example.com 和 test.com 指向不同的网站目录（如 /…...

编程日记 2025/7/1 8:30:10

一键启动多个 Chrome 实例并自动清理的 Bash 脚本分享！

目录一、📦 脚本功能概览二、📜 脚本代码一览三、🔍 脚本功能说明 （一）✅ 支持批量启动多个 Chrome 实例 （二）✅ 每个实例使用独立用户数据目录 （三）✅ 启动后自…...

编程日记 2025/6/29 18:13:05

LLaMA-Adapter

一、技术背景与问题 1.1 传统方法的数学局限二、LLaMA-Adapter 核心技术细节 2.1 Learnable Adaption Prompts 的设计哲学这种零初始化注意力机制的目的是在训练初期稳定梯度，避免由于随机初始化的适配提示带来的不稳定因素。通过门控因子gl的自适应调整，在训…...

编程日记 2025/6/27 22:53:23

鸿蒙电脑系统和统信UOS都是自主可控的系统吗

鸿蒙电脑系统（HarmonyOS）和统信UOS（Unity Operating System）均被定位为自主可控的操作系统，但两者的技术背景、研发路径和生态成熟度存在差异，需结合具体定义和实际情况分析： 1. 鸿蒙系统&#…...

编程日记 2025/6/29 22:05:56

【Unity 如何使用 Mixamo下载免费模型/动画资源】Mixamo 结合在 Unity 中的实现（Animtor动画系统，完整配置以及效果展示）

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、Mixamo介绍1、网址2、Mixamo功能介绍Mixamo 的核心功能Mixamo 适用场景二、Mixamo下载免费模型三、Mixamo下载免费动画四、导入Unity1.人物模型配置2.动画配置五、场景配置和效果测试1.人物…...

编程日记 2025/6/27 22:53:37

linux文件重命名命令

Linux文件重命名指南方法一：mv命令（单文件操作） mv 原文件名新文件名基础用法示例： mv old_file.txt new_name.txt保留扩展名技巧： mv document-v1.doc document-v2.doc方法二：rename命令&#xff08…...

编程日记 2025/6/27 22:51:45

JavaScript-DOM-02

自定义属性： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title>…...

编程日记 2025/6/27 23:30:54

跨部门项目管理优化：告别邮件依赖

1. 工具整合 1.1 协作平台集中化 1.1.1 一体化协作工具优势使用Microsoft Teams、Slack等一体化协作工具替代邮件，集成即时消息、文件共享、任务分配和视频会议功能，减少工具切换成本，提高沟通效率。 1.1.2 具体应用案例在Teams中创建项目频道，关联任务看板（Planner）…...

编程日记 2025/6/27 23:40:12

ADB常用语句

目录基本语句 pm 包管理操作查看文件夹内容查看文件内容删除文件 dumpsys查看系统服务状态 logcat保存日志日志级别基本语句查看是否安装成功 adb version查看是否连接成功 adb devices断开连接 adb disconnect进入安卓系统 adb shell 退出安卓系统 exit…...

编程日记 2025/7/1 8:39:00

阿里发布扩散模型Wan VACE，全面支持生图、生视频、图像编辑，适配低显存～

项目背景详述推出与目的 Wan2.1-VACE 于 2025 年 5 月 14 日发布，作为一个综合模型，旨在统一视频生成和编辑任务。其目标是解决视频处理中的关键挑战，即在时间和空间维度上保持一致性。该模型支持多种任务，包括参考到视频生成&a…...

编程日记 2025/6/27 23:37:34

谷歌开源轻量级多模态文本生成模型：gemma-3n-E4B-it-litert-preview

一、Gemma 3n模型概述 1.1 模型简介 Gemma 3n是Google DeepMind开发的一系列轻量级、最先进的开源模型。这些模型基于与Gemini模型相同的研究和技术构建，适合多种内容理解任务，如问答、摘要和推理等。 1.2 模型特点 Gemma 3n模型专为在资源受限设备上…...

编程日记 2025/7/1 1:24:01

【Linux】了解消息队列 system V信号量 IPC原理

🌻个人主页：路飞雪吖~ 🌠专栏：Linux 目录一、了解消息队列 ✨消息队列函数 🍔ftok() --- 系统调用设置key 🍔 msgget() 🍔msgctl() 🍔msgsnd() ✨消息队列的管理指令二、了…...

编程日记 2025/7/1 8:48:31

Git Clone 原理详解：为什么它比本地文件复制更快？ -优雅草卓伊凡

Git Clone 原理详解：为什么它比本地文件复制更快？ -优雅草卓伊凡今天有朋友问我：“为什么 git clone 下载文件这么快？而我在本地复制粘贴文件时，速度却慢得多？” 这个问题很有意思，因为它涉及…...

编程日记 2025/6/27 2:17:12

高级认知型Agent

目标：构建一个具备自主规划、多步推理、工具使用、自我反思和环境交互能力的智能代理，使其能够高效、可靠地完成复杂任务。核心理念： Agent的智能涌现于一个精密的认知循环：感知 (Perceive) -> 理解与规划 (Think/Plan - 想) -> 信息获取 (Search/Act - 查) -&g…...

编程日记 2025/7/1 4:20:20

网络爬虫（Web Crawler）详解

网络爬虫（Web Crawler）详解 1. 基本概念与核心目标定义：网络爬虫是一种自动化的程序，通过HTTP协议访问网页，提取并存储数据（如文本、链接、图片），并根据策略递归访问新链接。核心目标：数据采集：抓取特定网站或全网公开数据。索引构建：为搜索引擎提供页面内容（如…...

编程日记 2025/6/27 23:31:18

SQL 数值计算全解析：ABS、CEIL、FLOOR与ROUND函数深度精讲

一、问题拆解：数值计算需求分析 1.1 业务需求转换题目：在numbers表中计算每个数值的绝对值、向上取整、向下取整和四舍五入值。关键分析点： 需要对同一字段进行四种不同的数学运算每种运算对应一个特定的SQL数学函数需保持原始数据完整…...

编程日记 2025/6/27 23:00:52

智能导览系统多语言解说与AI问答功能：从deepseek到景区知识图谱的构建

本文面向文旅行业技术决策者、GIS 开发者、AI 算法工程师，旨在解决不够智能化导致游客体验不足的核心痛点，提供从技术选型到落地部署的全链路解决方案。如需获取智慧景区导览系统解决方案请前往文章最下方获取，如有项目合作及技术交流欢迎私…...

编程日记 2025/7/1 8:07:37

10.18 LangChain ToolMessage实战：多轮交互与状态管理全解析

使用 ToolMessage 管理工具调用输出关键词：LangChain ToolMessage, 工具调用管理, 多轮交互控制, 状态持久化, 输出解析 1. ToolMessage 的定位与价值在 LangChain v0.3 的 Agent 工作流中，ToolMessage 是专门用于管理工具调用输出的消息类型，主要解决以下核心问题： #m…...

编程日记 2025/6/27 23:33:33

linux基础操作11------（运行级别）

一.前言这个是linux最后一章节内容，主要还是介绍一下，这个就和安全有关系了，内容还是很多的，但是呢，大家还是做个了解就好了。二.权限掩码运行级别 0 关机运行级别 1 单用户 ，这个类似于windows安全…...

编程日记 2025/7/1 8:16:27

Python Ray 扩展指南

Python Ray 扩展指南 Ray 是一个开源的分布式计算框架，专为扩展 Python 应用程序而设计，尤其在人工智能和机器学习领域表现出色。它提供了简单的 API，使开发者能够轻松编写并行和分布式代码，而无需关注底层复杂性。以下是关于 Py…...

编程日记 2025/7/1 7:48:25

笑林广记读书笔记三

《锯箭杆》一人往观武场，飞箭误中其臂。请外科医治疗，医遂用小锯截其外露箭杆，即索谢礼。问：“内截箭头如何？” 医曰：“此是内科的事，你去找他们。” 白话翻译： 有…...

编程日记 2025/6/27 22:51:37

npm、pnpm、yarn 各自优劣深度剖析

在前端开发领域，包管理工具是开发者的得力助手，它们负责处理项目中的依赖安装、更新与管理。npm、pnpm、yarn 是目前最主流的三款包管理工具，它们在功能上有诸多相似之处，但在实际使用中又各有优劣。本文将结合包管理工具常见问题…...

编程日记 2025/6/30 4:39:55

Ulisses Braga-Neto《模式识别和机器学习基础》

模式识别和机器学习基础 [专著] Fundamentals of pattern recognition and machine learning / (美)乌利塞斯布拉加－内托(Ulisses Braga-Neto)著 ; 潘巍[等]译推荐这本书，作者有自己的见解，而且提供代码。问题是难度高，对于初学…...

编程日记 2025/6/27 22:51:31

python查询elasticsearch 获取指定字段的值的list

from elasticsearch import Elasticsearch from datetime import datetime, timedelta# 1.connect to Elasticsearch------------------------------------------------------------------------------------------------------ # prod连接到 Elasticsearch es_of_prod Elasti…...

编程日记 2025/6/27 23:35:32

百度Q1财报：总营收325亿元超预期智能云同比增速达42%

发布 | 大力财经 5月21日晚，百度发布2025年第一季度财报，显示一季度总营收达325亿元，百度核心营收255亿元，同比增长7%，均超市场预期。一季度，百度核心净利润同比增48%至76.3亿元，智能云持续强劲…...

编程日记 2025/6/27 22:00:55

BurpSuite Montoya API 详解

文章目录前言1. API 结构1.1 概述1.2 API文件源码解析 2. BurpExtension 接口3. MontoyaApi接口4. package burp.api.montoya.proxy4.1 Proxy 接口4.2 ProxyRequestHandler接口4.3 Demo 5. BurpSuite burpSuite()6. Extension extension()7. Http http()参考前言我们已经学…...

编程日记 2025/6/29 19:37:39

oracle使用SPM控制执行计划

一 SPM介绍 Oracle在11G中推出了SPM（SQL Plan management）,SPM是一种主动的稳定执行计划的手段，能够保证只有被验证过的执行计划才会被启用，当由于种种原因（比如统计信息的变更）而导致目标SQL产生了新的执…...

编程日记 2025/6/27 22:51:36

YCKC【二分查找专题】题解

数的范围题解点击跳转题目链接：数的范围比较经典的二分查找例题，不做过多赘述。注意看二分的对象以及最终想求什么：想求尽可能大 ，那么就是最大值类型的二分；想求尽可能小，就是最小值类型的二分。注意二分…...

编程日记 2025/6/30 1:41:12

【Java高阶面经：微服务篇】8.高可用全链路治理：第三方接口不稳定的全场景解决方案

一、第三方接口治理的核心挑战与架构设计 1.1 不稳定接口的典型特征维度表现影响范围响应时间P99超过2秒，波动幅度大（如100ms~5s）导致前端超时，用户体验恶化错误率随机返回5xx/429，日均故障3次以上核心业务流程中断，交易失败率上升协议不一致多版本API共存，字段定义不…...

编程日记 2025/6/27 23:40:03

关于FPGA 和 ASIC设计选择方向的讨论

FPGA 和 IC 设计怎么选？哪个发展更好？ 一句话总结： 如果你学历极高，追求高薪资、愿意投入长期学习，目标是进入大型芯片公司，建议走 IC（ASIC）设计；如果你更看重灵活性、创…...

编程日记 2025/6/29 2:11:09

项目中常用的docker指令

1. docker ps 查看当前正在运行的容器。 docker ps -a 这将列出所有容器，包括停止运行的。 2. docker exec 在已经运行的容器中执行命令的工具启动一个交互式 Bash 会话 docker exec -it my-container bash介绍 docker exec 命令 docker exec 是 Docker 提供的…...

编程日记 2025/6/27 23:13:01

以加减法计算器为例，了解C++命名作用域与函数调用

************* C topic: 命名作用域与函数调用 ************* The concept is fully introducted in the last artical. Please refer to 抽象：C命名作用域与函数调用-CSDN博客 And lets make a calculator to review the basic structure in c. 1、全局函数 A…...

编程日记 2025/6/30 2:07:41

MySQL EXPLAIN 使用详解与执行计划分析优化

MySQL EXPLAIN 使用详解与执行计划分析优化一、什么是 EXPLAIN？ EXPLAIN 是 MySQL 提供的 SQL 语句分析工具，可以显示 SQL 语句在执行时的执行计划，包括表的访问顺序、使用的索引、连接类型、扫描行数等。通过分析 EXPLAIN 的输出结果&…...

编程日记 2025/6/27 22:51:38

Arthas：Java诊断利器实战指南

在Java应用开发和运维中，线上问题排查往往是一场与时间的赛跑。传统的日志分析、重启大法或JVM工具（如jstack、jmap）虽然有效，但存在操作复杂、无法实时追踪等问题。Arthas作为阿里巴巴开源的Java诊断工具，凭借无需重启…...

编程日记 2025/6/27 5:56:08

一文读懂迁移学习：从理论到实践

在机器学习和深度学习的快速发展历程中，数据和计算资源成为了制约模型训练的关键因素。当我们面对新的任务时，重新训练一个从头开始的模型往往耗时耗力，而且在数据量不足的情况下，模型的性能也难以达到理想状态。这时，…...

编程日记 2025/6/27 23:30:56

ElasticSearch安装

ElasticSearch 脑图知识图谱地址：ProcessOn Mindmap|思维导图简介 ES是一个开源的分布式搜索和分析引擎，基于 Apache Lucene 构建，专为处理海量数据设计，支持实时搜索、分析和可视化。排行第一的搜索引擎官网地址&#xff1…...

编程日记 2025/6/27 22:51:29

c#中添加visionpro控件(联合编程)

vs添加vp控件创建窗体应用右键选择项点击确定加载CogAcqfifoTool工具拍照设置参数保存.vpp 保存为QuickBuild或者job, ToolBlock 加载保存的acq工具实例化相机工具类 //引入命名空间 using Cognex.VisionPro; //实例化一个相机工具类 CogAcqFifoTool cogAcqFifoTool n…...

编程日记 2025/6/30 20:04:58

MySQL主键与外键详解：数据关系的基石与守护者

引言在数据库设计中，主键（Primary Key）和外键（Foreign Key）是构建数据关系模型的核心工具。它们不仅保障了数据的唯一性和完整性，还实现了跨表数据关联的逻辑闭环。本文将通过实例解析这两大关键概念&…...

编程日记 2025/6/29 6:52:44

Go语言打造：超高性能分布式唯一ID生成工具

一、简介这是一个超高性能唯一ID生成工具，支持docker一键部署，提供API接入功能支持高性能生成Snowflake ID、Sonyflake ID、UUID v1、UUID v4、XID、KSUID以及自定义ID的服务可以用来生成订单编号、学号、高标准唯一标识、有序ID等等开源地址参考&#…...

编程日记 2025/7/1 4:19:21

列表计量单位显示

列表计量单位显示 E:\javaDev\tender-project-vben5\apps\web-antd\src\views\tender\material\data.ts import type { FormSchemaGetter } from #/adapter/form; import type { VxeGridProps } from #/adapter/vxe-table;import { getDictOptions } from #/utils/dict; impor…...

编程日记 2025/6/27 2:39:53

RAG系统的现实困境与突破：数据泥潭到知识自由

一、当前RAG系统的核心痛点 1. 数据处理的阿喀琉斯之踵知识形态的暴力归一化：将PDF、视频、数据库等异构数据强行转化为统一文本，导致： 纸质文献中的数学公式OCR错误率高达37%（ICDAR2023数据）流程图/思维导图等非连续…...

编程日记 2025/6/29 8:28:05

1. Props / 自定义事件 (父子通信)

使用场景

代码实现

使用步骤

关键点

2. v-model / .sync (双向绑定)

使用场景

代码实现

使用步骤

关键点

3. Event Bus (全局事件总线)

使用场景

代码实现

使用步骤

关键点

4. Provide / Inject

使用场景

代码实现

使用步骤

关键点

5. Pinia (状态管理)

使用场景

代码实现

使用步骤

关键点

6. refs 访问组件实例

使用场景

代码实现

使用步骤

关键点

对比总结表

通用最佳实践

相关文章：