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

解决vue3没有this造成的无法使用vue2

在Vue2项目中可以使用this.$router.push等方法进行路由的跳转,但是在Vue3的setup函数里,并没有this这个概念,因此如何使用路由方法

1.// 在新的vue-router里面尤大加入了一些方法,比如这里代替this的useRouter,具体使用如下:
//引入路由函数
import { useRouter } from "vue-router";
//使用
setup() {
    //初始化路由
    const router = useRouter();
    router.push({
        path: "/"
    });
    
    return {};
}
 

2.在vue2中可以通过this来访问到$refs,vue3中由于没有this所以获取不到了,但是官网中提供了方法来获取:

<template>
  <h2 ref="root">姓名</h2>
</template>
<script>
    import { onMounted, ref } from 'vue'
    export default {
        name: 'test9',
        setup(){
            const root  = ref(null)
            onMounted(()=>{
                console.log(root.value);
            })
            return {
                root
            }
        },
    }
</script>

//第二种方法,也可以通过getCurrentInstance来获取
<template>
  <h2 ref="root">姓名</h2>
</template>

<script>
    import { onMounted, ref, getCurrentInstance } from 'vue'

    export default {
        name: 'test9',
        setup(){)
            const {proxy} = getCurrentInstance()
            onMounted(()=>{
                console.log(proxy.$refs.root);
            })
            return {
            }
        },
    }
</script>

3.关于element在vue3的使用方法,没有this.$message等方法解决方案
<template>
  <button @click="doLogin">登录</button>
</template>

<script>
import { getCurrentInstance } from 'vue'
export default {
  name: 'Test',
  setup () {
    const instance = getCurrentInstance() // vue3提供的方法,创建类似于this的实例
    const doLogin = () => {
      instance.proxy.$message({ type: 'error', text: '登录失败' }) // 类似于this.$message()
    }
    return { doLogin }
  },
   // 如果想试用this.$message,须在mounted钩子函数中,setup中没有this实例,
   //但vue3.0中还是建议在setup函数中进行逻辑操作
  mounted () {

    this.$message({ type: 'error', text: '登录失败' })
  }
}
</script>
 

相关文章:

解决vue3没有this造成的无法使用vue2

在Vue2项目中可以使用this.$router.push等方法进行路由的跳转&#xff0c;但是在Vue3的setup函数里&#xff0c;并没有this这个概念&#xff0c;因此如何使用路由方法 1.// 在新的vue-router里面尤大加入了一些方法&#xff0c;比如这里代替this的useRouter&#xff0c;具体使用…...

百度前端二面vue面试题指南

Vue 组件间通信有哪几种方式&#xff1f; ​ Vue 组件间通信是面试常考的知识点之一&#xff0c;这题有点类似于开放题&#xff0c;你回答出越多方法当然越加分&#xff0c;表明你对 Vue 掌握的越熟练。Vue 组件间通信只要指以下 3 类通信&#xff1a;父子组件通信、隔代组件通…...

【备战面试】每日10道面试题打卡-Day1

本篇总结的是Java基础知识相关的面试题&#xff0c;后续也会更新其他相关内容 文章目录1、JVM、JRE和JDK的关系&#xff1f;2、Java语言有哪些特点&#xff1f;3、Java和C的区别有哪些&#xff1f;4、Java有哪些数据类型&#xff1f;5、访问修饰符 public、private、protected&…...

服务器重启后jar包自动重启

1、创建自动启动脚本 vi /etc/rc.d/auto_start_script.sh #!/bin/bash #添加本地Java环境&#xff0c;这两句必须添加&#xff01;不然报错&#xff0c;找不到java命令 export JAVA_HOME/java/jdk1.8.0_181 export PATH$JAVA_HOME/bin:$PATH #系统引导后延迟5秒执行脚本&#x…...

Ubuntu 交叉编译工具链安装

Ubuntu 交叉编译工具链安装 1 交叉编译器安装 ARM 裸机、Uboot 移植、Linux 移植这些都需要在 Ubuntu 下进行编译&#xff0c;编译就需要编译器&#xff0c;我们在第三章“Linux C 编程入门”里面已经讲解了如何在 Liux 进行 C 语言开发&#xff0c;里面使用 GCC 编译器进行代…...

Vue3中ref、reactive、toRef、toRefs基本用法和区别

ref、reactivesetup 函数中默认定义的变量并不是响应式的&#xff08;即数据变了以后页面不会跟着变&#xff09;&#xff0c;如果想让变量变为响应式的变量&#xff0c;需要使用 ref 和 reactive 函数修饰变量。区别&#xff1a;reactive只能传入对象类型的参数&#xff0c;所…...

python hash 不一致踩坑总结

背景 在线上的一次模型对照实验中&#xff0c;发现对同一个用户进行 hash 分流时&#xff0c;会生成不同的 random 值&#xff0c;导致实验数据污染 原因 参考&#xff1a;https://www.zhihu.com/question/57526436 python 的字符串 hash 算法并不是直接遍历字符串每个字符去…...

qt5.15 快速安装 国内源

1 qt5.15 安装问题 最大的问题就是需要在线下载与安装。即使挂了科学上网&#xff0c;国外的服务器下载速度也还是超级慢。 在网上找了各种解决办法后&#xff0c;终于找到一个快速下载安装的办法。 2 安装器下载 阿里源、清华源都没有Windows的安装器了&#xff0c;在腾讯…...

JavaScript 对象

文章目录JavaScript 对象所有事物都是对象JavaScript 对象访问对象的属性访问对象的方法创建 JavaScript 对象创建直接的实例使用对象构造器创建 JavaScript 对象实例把属性添加到 JavaScript 对象把方法添加到 JavaScript 对象JavaScript 类JavaScript for...in 循环JavaScrip…...

数据库设计三大范式

数据库设计遵循三大范式的理由&#xff1a;在面对复杂是数据库设计的时候&#xff0c;设计数据库要遵循一定的规则&#xff0c;有了一定的规范&#xff0c;这样就可以是自己看起来舒服。 1&#xff0e;第一范式(确保每列保持原子性) 第一范式主要是保证数据表中的每一个字段的…...

cesium学习记录02-vue项目中cesium的配置与使用

1&#xff0c;下载cesium包 &#xff08;当然&#xff0c;使用npm install cesium安装也是可以的&#xff0c;不过在这里选择下载包放到本地&#xff09; 官方下载地址 笔者的cesium版本为1.101 2&#xff0c;将下载的Cesium文件夹放到项目里某个位置 这里&#xff0c;笔者将…...

【微服务】-认识微服务

目录 1.1 单体、分布式、集群 单体 分布式 集群 1.2 系统架构演变 1.2.1 单体应⽤架构 1.2.2 垂直应⽤架构 1.2.3 分布式架构 1.2.4 SOA架构 1.2.5 微服务架构 1.3 微服务架构介绍 微服务架构的常⻅问题 1.4 SpringCloud介绍 1.4.1 SpringBoot和SpringCloud有啥关…...

容器的线程安全性

&#xff08;1&#xff09;c的map、vector等容器以及go中的slice、map都不是线程安全的。 &#xff08;2&#xff09;线程安全&#xff1a;多线程访问执行n次每次结果都是确定的 &#xff08;3&#xff09;保证线程安全&#xff1a;同步 &#xff08;4&#xff09;c同步相关…...

如何用Postman测试整套接口?测试流程是什么?

目录 基于postman测试接口(整套接口测试) 可以解决的问题 开启控制台 单个测试尝试 使用请求结果当参数 打印结果(JSON) 自定义可视化结果 随机参数 测试用例连接 一键测试接口集合 从swagger导入接口 自定义全局变量 总结感谢每一个认真阅读我文章的人&#xff01…...

【批处理脚本】-2.1-测试IP连接命令ping

"><--点击返回「批处理BAT从入门到精通」总目录--> 共4页精讲(列举了所有ping的用法,图文并茂,通俗易懂) ping是用来检查网络是否通畅,或者网络连接速度的命令。 目录 1 ping命令解析 1.1 Ping 指定的主机...

百度“文心一言”携手酷开科技,实现AI智能领域新突破!

进入21世纪&#xff0c;AI人工智能一直都是讨论度非常高的话题之一&#xff0c;各行各业的领导者都开始在智能领域进行了初步探索&#xff0c;这也证明了AI人工智能在未来一定会在很大程度上影响我们的生活、工作。 近日&#xff0c;深圳市酷开网络科技股份有限公司成为百度文…...

Elasticsearch索引全生命周期管理一网打尽

文章目录一、索引增删改查1.1、创建索引1.2、查询索引1.3、修改索引1.4、删除索引二、索引关闭和打开2.1、关闭索引2.2、打开索引三、索引收缩和拆分3.1、索引收缩3.2、索引拆分3.2.1、索引拆分的工作过程3.2.2、为什么Elasticsearch不支持增量的重新分片&#xff1f;3.2.3、如…...

MySQL的SELECT

简单SELECT语句我们从最简单的SELECT语句开始起简单的SELECT语句&#xff1a; SELECT {*, column [alias], . } FROM table; 说明&#xff1a; –SELECT列名列表。*表示所有列。 –FROM 提供数据源(表名/视图名) –默认选择所有行例子 查询数据&#xff1a;select * from stude…...

conda 搭建tensorflow-GPU和pycharm以及VS2022 软件环境配置

conda 搭建tensorflow-GPU和pycharm以及VS2022 软件环境配置一、TensorFlow 环境配置安装1. Anaconda下载安装2.conda创建tensorflow环境二、pycharm以及VS2022 环境配置2.1 pycharm 软件安装以及环境配置2.2.1 pycharm 软件安装2.2.2 pycharm 软件conda环境配置2.2 Visual Stu…...

HACKTHEBOX——Teacher

nmapnmap -sV -sC -p- -T4 -oA nmap 10.10.10.153nmap只发现了对外开放了80端口&#xff0c;从http-title看出可能是某个中学的官网http打开网站确实是一个官网&#xff0c;查看每个接口看看有没有可以利用的地方发现了一个接口&#xff0c;/images/5.png&#xff0c;但是响应包…...

干货| Vue小程序开发技术原理

目前应用最广的三大前端框架分别是Vue、 React 和 Angular 。其中&#xff0c;不管是 BAT 大厂&#xff0c;还是创业公司&#xff0c;Vue 都有广泛的应用。如今&#xff0c;再随着移动开发小程序的蓬勃发展&#xff0c;Vue也广泛应用到了小程序开发当中。今天&#xff0c;就来详…...

unity-web端h5记录

title: unity-web端h5记录 categories: Unity3d tags: [unity, web, h5] date: 2023-02-23 17:00:53 comments: false mathjax: true toc: true unity-web端h5记录 前篇 5款常用的html5游戏引擎以及优缺点分析 - https://imgtec.eetrend.com/blog/2022/100557792.htmlUnity We…...

基于部标JT808的车载视频监控需求与EasyCVR视频融合平台解决方案设计

一、方案背景 众所周知&#xff0c;在TSINGSEE青犀视频解决方案中&#xff0c;EasyCVR视频智能融合共享平台主要作为视频汇聚平台使用&#xff0c;不仅能兼容安防标准协议RTSP/Onvif、国标GB28181&#xff0c;互联网直播协议RTMP&#xff0c;私有协议海康SDK、大华SDK&#xf…...

Grafana邮件及告警配置

之前部署过服务器的监控组件程序&#xff0c;本在部署时也进行邮件及告警配置&#xff0c;但未进行文档整理&#xff0c;在这儿进行展示。之前用过Grafana的7.*的版本&#xff0c;在进行邮件配置还比较OK&#xff0c;但在配置告警时&#xff0c;太繁琐&#xff0c;还要自己去写…...

Springboot Java多线程操作本地文件,加读写锁,阻塞的线程等待运行中的线程执行完再查询并写入

Springboot Java多线程操作本地文件&#xff0c;加读写锁&#xff0c;阻塞的线程等待运行中的线程执行完再查询并写入1、读写锁2、文件锁3、Synchronized和Lock的区别1、读写锁 在 Spring Boot 中进行多线程操作本地文件并加读写锁可以使用 Java 的 java.nio.file 包中提供的文…...

WebRTC拥塞控制算法——GCC介绍

网络拥塞是基于IP协议的数据报交换网络中常见的一种网络传输问题&#xff0c;它对网络传输的质量有严重的影响&#xff0c; 网络拥塞是导致网络吞吐降低&#xff0c; 网络丢包等的主要原因之一&#xff0c; 这些问题使得上层应用无法有效的利用网络带宽获得高质量的网络传输效果…...

大数据技术之Maxwell基础知识

大数据技术之Maxwell基础知识 文章目录大数据技术之Maxwell基础知识0、写在前面1、Maxwell 概述1.1 Maxwell 定义1.2 Maxwell 工作原理1.2.1 MySQL 主从复制过程1.2.2 Maxwell 的工作原理1.2.3 MySQL 的 binlog1.3 Maxwell与Cannal对比2. Maxwell 使用2.1 Maxwell 安装部署2.1.…...

元数据管理实践数据血缘

元数据管理实践&数据血缘 什么是元数据&#xff1f;元数据MetaData狭义的解释是用来描述数据的数据&#xff0c;广义的来看&#xff0c;除了业务逻辑直接读写处理的那些业务数据&#xff0c;所有其它用来维持整个系统运转所需的信息&#xff0f;数据都可以叫作元数据。比如…...

SQL的优化【面试工作】

SQL的优化 最近看到群友在讨论这块的优化,感觉不管工作和面试,都是用上的,记录下吧!(不然又记不住) 优化点: 处理和优化复杂的 SQL 查询可以有以下几个方向&#xff1a; 1.优化查询语句本身 首先&#xff0c;可以优化 SQL 查询语句本身&#xff0c;尽量让其更加简洁、高效。 …...

Kotlin 40. Dependency Injection 依赖注入以及Hilt在Kotlin中的使用,系列3:Hilt 注释介绍及使用案例

一起来学Kotlin&#xff1a;概念&#xff1a;27. Dependency Injection 依赖注入以及Hilt在Kotlin中的使用&#xff0c;系列3&#xff1a;Hilt 注释介绍及使用案例 此系列博客中&#xff0c;我们将主要介绍&#xff1a; Dependency Injection&#xff08;依赖注入&#xff09…...

网站设计与网页制作毕业论文/黄金网站app视频播放画质选择

现在数据库或是某个文件里有一些数据需要显示在界面上该怎么办呢&#xff1f;我们的目的就是将这些数据设法放到界面上去可以显示出来&#xff0c;这个将数据放到界面上去的过程可以叫住数据绑定。在Flex应用中程序中&#xff0c;数据绑定的实际是借助事件机制来完成的&#xf…...

什么网站可以查房屋建筑面积/百度seo快速排名

奋斗的小孩系列 FPGA学习altera系列: 第十一篇 流水灯设计 作者:奋斗的小孩 郝旭帅(转载请注明出处) 大侠好,欢迎来到FPGA技术江湖,江湖偌大,相见即是缘分。大侠可以关注FPGA技术江湖,在“闯荡江湖”、"行侠仗义"栏里获取其他感兴趣的资源,或者一起煮酒言欢…...

浙江网站建设电话/石家庄网站建设就找

最近有人问说&#xff0c;自我管理需要哪些工具。问题一出&#xff0c;群里一片热火朝天的&#xff0c;基本上还是在讨论Omnifocus和Doit.im哪个好、为知笔记和印象笔记哪个好。 我认为&#xff0c;一个问题的解决&#xff0c;要看逻辑、看思路&#xff0c;而不是比谁的声音响、…...

广州比较好的外贸公司有哪些/福建seo外包

在main.js中&#xff0c;vue实例的components 是声明有哪些组件&#xff0c;我们通过import App from /App’导入&#xff0c;template 是使用哪个组件&#xff0c;el: ‘#app’ 是index.html 的 ,它将被替换为mian.js中导入的组件App.vue&#xff0c;组件一般使用的方法就是,需…...

17网站一起做网店 发货慢/最新seo教程

2019独角兽企业重金招聘Python工程师标准>>> 过度使用同步会导致性能低下、死锁或其他不确定问题 在一个同步方法或代码块中&#xff0c;不要放弃对客户端的控制 即&#xff1a;在一个同步区域内部&#xff0c;不要调用被覆盖方法&#xff0c;或者是传入对象提供的方…...

商丘做网站用什么程序比较好/百度品牌专区怎么收费

http://www.ruanyifeng.com/blog/2009/07/xpath_path_expressions.html 简单说&#xff0c;xpath就是选择XML文件中节点的方法。 所谓节点&#xff08;node&#xff09;&#xff0c;就是XML文件的最小构成单位&#xff0c;一共分成7种。 - element&#xff08;元素节点&#xf…...