vue3的开发小技巧

news2024/12/29 1:07:43
  「总之岁月漫长,然而值得等待。」 

目录

  • 父组件调用子组件函数
  • 如何访问全局api
父组件调用子组件函数

ref, defineExpose

//父组件 代码
<child ref="ch">

this.$refs.ch.fn();

//子组件 函数抛出
const fn = () => {
};
defineExpose({ fn });
如何访问全局api
众所周知,vue3没有this,所以,一些封装在全局的变量或api不太好引用。且vue3并不推荐getCurrentInstance

主要原因是防止你把它当成this使用,因为setup函数执行较早。客观原因还有这是内部api,以后可能会修改等等
在这里插入图片描述
想获取全局变量,可以试试以下方法

// 在main.js中provide
app.provide('$test', '123')

// 组件内获取
import { inject } from 'vue'
const test = inject('$test')
console.log('inject的$test', test)

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

influxdb2.0插入数据字段类型出现冲突问题解决

一、问题出现 一个学校换热站自控系统&#xff0c;会定时从换热站获取测点数据&#xff0c;并插入到influxdb数据库中。influxdb插入数据时&#xff0c;报错提示&#xff1a; com.influxdb.exceptions.UnprocessableEntityException: failure writing points to database: par…

目标检测——摩托车头盔检测数据集

一、简介 首先&#xff0c;摩托车作为一种交通工具&#xff0c;具有高速、开放和稳定性差的特点&#xff0c;其事故发生率高&#xff0c;伤亡率排在机动车辆损伤的首位。因此&#xff0c;摩托车乘员头盔对于保护驾乘人员头部安全至关重要。在驾乘突发状况、人体受冲击时&#…

白话模电:1.绪论与半导体(考研面试常问问题)

一、什么是信号&#xff1f;什么是电信号&#xff1f; 信号反映消息的物理量&#xff0c;电信号是反应电压或电流变化的物理量。 二、什么是模拟信号&#xff1f;什么是数字信号&#xff1f; 模拟信号是时间和数值上均连续的信号&#xff0c;数字信号是时间和数值上均离散的信号…

Android使用WebView打开外部网页链接

发布Android应用&#xff0c;除了用原生开发外&#xff0c;更多是采用内嵌H5网页的方式来做&#xff0c;便于更新以及多平台使用。 一、第一种方式是直接通过WebView打开外部H5链接。 新建Android工程 直接创建一个工程&#xff0c;点击运行就可以了&#xff0c;打开是个空页…

13.西瓜书——半监督学习

1.概述 &#xff08;1&#xff09; 纯半监督学习 (Pure Semi-Supervised Learning) 纯半监督学习是一种典型的半监督学习方法&#xff0c;它的主要特点是同时利用有标签数据和无标签数据进行模型训练。目标是通过整合这两种类型的数据来提高模型的泛化性能。在这个过程中&#…

httprunner日志跟踪

1. 日志位置 1.1. 关键字&#xff1a;.log generate testcase log: D:\httprunner\demo\logs\082dd63e-56b9-40c1-9392-039dc0a03667.run.log 1.2. 控制台效果 2. 项目位置 3. 日志输出原理 3.1. 测试用例ID和Request ID 为排除故障&#xff0c;每个测试用例将生成唯一ID&…

物联网的商业模式洞察

大约在十年前&#xff08;2014年11月&#xff09;&#xff0c;全球知名管理思想家、哈佛商学院教授迈克尔波特与PTC前首席执行官吉姆赫普尔曼&#xff0c;在《哈佛商业评论》上联合撰写了一篇备受赞誉的文章&#xff0c;题为《智能互联产品如何改变竞争》。在这篇文章中&#x…

羊大师分析羊奶滋养,女性魅力绽放

羊大师分析羊奶滋养&#xff0c;女性魅力绽放 羊奶&#xff0c;自古以来便是滋养身心的天然佳品。它富含多种营养成分&#xff0c;如蛋白质、脂肪、矿物质和维生素等&#xff0c;能够为女性提供全面而均衡的营养支持&#xff0c;帮助她们保持健康与活力。 女性是社会的半边天&…

WordPress建站入门教程:如何选择和设置固定链接结构?

我们成功搭建好WordPress网站后&#xff0c;发布的文章对应的URL地址默认是使用“日期和名称型”&#xff0c;即是网站域名跟着的是年月日&#xff0c;最后是文章标题&#xff0c;如http://www.yigujin.com/2024/03/06/免费响应式WordPress博客主题JianYue/ 为了让我们的文章U…

Python算法题集_搜索二维矩阵

Python算法题集_搜索二维矩阵 题51&#xff1a;搜索二维矩阵1. 示例说明2. 题目解析- 题意分解- 优化思路- 测量工具 3. 代码展开1) 标准求解【矩阵展开为列表二分法】2) 改进版一【行*列区间二分法】3) 改进版二【第三方模块】 4. 最优算法5. 相关资源 本文为Python算法题集之…

LeetCode 2482.行和列中一和零的差值

给你一个下标从 0 开始的 m x n 二进制矩阵 grid 。 我们按照如下过程&#xff0c;定义一个下标从 0 开始的 m x n 差值矩阵 diff &#xff1a; 令第 i 行一的数目为 onesRowi 。 令第 j 列一的数目为 onesColj 。 令第 i 行零的数目为 zerosRowi 。 令第 j 列零的数目为 zer…

AIOPS:Zabbix结合讯飞星火做自动化告警+邮件通知并基于人工智能提供解决方案

目前Zabbix官方已经提供Zabbix+ChatGPT的解决方案 ChatGPT一周年,你充分利用了吗?Zabbix+ChatGPT,轻松化解告警! 但是由于需要魔法等其他因素,比较不稳定,遂决定使用国内模型,这里我挑选的是讯飞星火,基于我之前的文档,在此基础上通过Zabbix的告警脚本实现调用AI模型…

二叉树入门

这篇博客通过手动创建的一个简单二叉树&#xff0c;实现二叉树遍历&#xff0c;返回节点&#xff0c;叶子个数&#xff0c;查找结点等相关操作。 1. 二叉树的概念 二叉树不为空时&#xff0c;由根节点&#xff0c;左/右子树组成&#xff0c;逻辑结构如下&#xff0c;当二叉树…

Java多线程——创建线程的几种方式

目录 引出创建线程有几种方式&#xff1f;方式1&#xff1a;继承Thread创建线程方式2&#xff1a;通过Runnable方式3&#xff1a;通过Callable创建线程方式4&#xff1a;通过线程池概述ThreadPoolExecutor API代码实现源码分析工作原理&#xff1a;线程池的阻塞队列选择线程池已…

leetcode 热题 100_轮转数组

题解一&#xff1a; 新数组存储&#xff1a;另外用一个数组存储移动后的结果&#xff0c;再复制回原数组。 class Solution {public void rotate(int[] nums, int k) {int[] result new int[nums.length];for (int i 0; i < nums.length; i) {result[(i k) % nums.lengt…

VS配置开发与远程调试笔记

先简单写一下&#xff0c;后续详细补充 场景&#xff1a;本地机器开发&#xff0c;虚拟机调试 准备工作&#xff1a; 由于要将生成的文件生成在虚拟机&#xff0c;避免反复拷贝&#xff0c;直接配置虚拟机共享文件夹进行写入&#xff0c;步骤如下&#xff1a; 虚拟机打开网…

作业1-32 B3620 x 进制转 10 进制

题目 思路 分析题目可知&#xff0c;此题可以用到大写字母&#xff0c;也就是从A开始&#xff0c;分别表示11往后的数字。 那么就用一个for循环&#xff0c;将零到九划分为一个等级&#xff0c;将A到Z划分为一个等级。 for(int i0;i<str.length();i){if(str[i]>0&&…

大模型时代下的自动驾驶研发测试工具链-SimCycle

前言&#xff1a; 最近OpenAI公司的新产品Sora的发布&#xff0c;正式掀起了AI在视频创作相关行业的革新浪潮&#xff0c;AI不再仅限于文本、语音和图像&#xff0c;而直接可以完成视频的生成&#xff0c;这是AI发展历程中的又一座重要的里程碑。AI正在不断席卷着过去与我们息…

万字详解,Java实现低配版线程池

文章目录 1.什么是线程池2.线程池的优势3.原理4.代码编写4.1 阻塞队列4.2 ThreadPool线程池4.3 Worker工作线程4.4 代码测试 5. 拒绝策略5.1 抽象Reject接口5.2 BlockingQueue新增tryPut方法5.3 修改ThreadPool的execute方法5.4 ThreadPool线程池构造函数修改5.5 拒绝策略实现1…

python 基础知识点(蓝桥杯python科目个人复习计划60)

今日复习计划&#xff1a;做题 例题1&#xff1a;可构造的序列总数 问题描述&#xff1a; 构造王国一年一度的构造大赛又开始了&#xff0c;这次构造王国的国王将只给出两个数k和n&#xff0c;需要大家回答出能够构造多少个符合以下条件的序列&#xff1a; 序列的长度为n&a…