程序员经验分享-hwhale

在外部js文件中直接调用vue文件中自定义的方法

2023-10-29

1. 在vue文件引入API

import {getCurrentInstance, onMounted} from 'vue'

onMounted()用于挂载数据，getCurrentInstance()用于获取实例后再使用。

2. 定义setup()方法

  setup(props,ctx) {
    //将vue中方法设为window方法,外部js可直接调用
    onMounted(() => {
      window.layerAdd = instance.proxy.layerAdd
    })
    const instance = getCurrentInstance()
  },

 

setup函数是处于生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数。通过如上代码，可将vue中自定义的方法设置为window方法，外部Js可直接调用

3. 在外部js调用

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vuejs

javascript

前端

在外部js文件中直接调用vue文件中自定义的方法 的相关文章

随机推荐

  • arcgis墨卡托与经纬度之间的互相转换

    使用 esri geometry webMercatorUtils 方法 经纬度转墨卡托 webMercatorUtils lngLatToXY x y 返回墨卡托坐标 merx mery 墨卡托转经纬度 webMercatorUtils

  • EasyExcel读取excel读复杂表头文件

    最近在项目开发中 遇到的一个excel复杂表头的导入数据库操作 具体怎么做 直接上代码吧 1 文件上传 把你要导入的文件上传磁盘某个目录 当然你也可以导入到项目目录下都行 该类的位置就是controller层 给用户提供一个上传文件的接口

  • 子集生成算法——增量构造法

    我的个人博客 逐步前行STEP 思路是一次选出一个元素放入集合中 生成0 n的子集 每次选出最小的值放入集合中 通过从0递增得到下一个位置的值 include

  • String常量池问题的几个例子

    String常量池问题的几个例子 示例1 Java代码 String s0 kvill String s1 kvill String s2 kv ill System out println s0 s1 System out println

  • 剑指Offer-40

    题目 一个整型数组里除了两个数字之外 其他的数字都出现了两次 找出只出现一次的数字 要求时间复杂度是 O n 空间复杂度是 O 1 实现 coding java public class Solution40 用 Hashmap 的方式 时

  • ES3~ES6数组的方法总结

    ES3数组的方法 push arr push 值 向数组的最后一个位置添加一个元素 语法 arr push 返回值 改变之后的数组的长度 改变原数组 var arr aa bb cc var res arr push dd console

  • day08-编程题

    每日作业 JavaSE第8天 题目1 训练 现已知工人 Worker 类 属性包含姓名 name 工龄 year 请编写该类 提供构造方法和get set方法 在测试类中 请查看键盘录入Scanner类的API 创建工人类对象 属性值由键盘

  • 基于STM32红外避障小车的设计（有代码）

    什么是避障小车 用红外光电传感器 探测到物体即输出脉冲 输入到单片机中处 理一下 再对电机驱动模块进行控制 实现壁障的功能 这样的避障小车又称为简单的避障机器人 各种避障方法 1 红外线避障 2 超声波避障 红外避障原理 基本硬件 红外发射

  • FATAL Port 4000 has been used. Try other port instead.

    我在另一个powershell也打开了hexo s 关掉另一个powshell就好了

  • vue移动端项目屏幕适配--flexible rem

    开始 首先 我们使用 vue 的脚手架 vue cli 来初始化一个 webpack 项目 没有安装过 vue cli 的请先安装 vue cli 安装所需依赖后安装 lib flexible 和 px2rem loader 1 下载lib

  • AOP的切入点Pointcut中的execution表达式详解

    在面向切面编程 AOP 中 切入点 Pointcut 用于定义在哪些方法或代码段上应该应用切面的逻辑 切入点使用表达式来匹配目标方法的签名和执行位置 在 Spring AOP 中 常用的切入点表达式是基于方法的 execution 表达式

  • 理解Vulkan中的各种对象

    学习Vulkan API的一个重要部分是了解其中定义了哪些类型的对象 它们代表了什么 以及它们如何相互关联 为了帮助解决这个问题 创建了一个图表 展示了所有vulkan对象及其一些关系 尤其是从另一个对象创建对象的顺序 每个vulkan对象

  • java中局部变量、全局变量和static的区别（简单易懂）

    java中的变量类型有 1 类变量 独立于方法之外的变量 用 static 修饰 2 实例变量 独立于方法之外的变量 不过没有 static 修饰 3 局部变量 类的方法中的变量 比如 Java 局部变量 局部变量声明在方法 构造方法或者语

  • 回调函数的原理及运用

    第一个问题 什么是回调函数 来看一下百度百科的定义为 回调函数就是一个通过函数指针调用的函数 如果你把函数的指针 地址 作为参数传递给另一个函数 当这个指针被用来调用其所指向的函数时 我们就说这是回调函数 回调函数不是由该函数的实现方直接调

  • hadoop环境搭建之安装JDK

    判断是否安装了jdk 使用java version 和 javac命令判断是否安装了jdk root localhost ssh java version bash java command not found root localhost

  • 【重铸Java根基】为什么Java中只有值传递

    最近带应届新员工 教然后知不足 发现自己把很多基础知识已经还给了大学老师 因此开贴 温故而知新 从最基础的Java知识开始由浅入深 在某个知识点中遇到有疑惑的点会额外多写几句或者单独开帖子展开 先要搞清楚什么是形参 什么是实参 形参 定义方

  • 寄存器的映射过程

  • vue学习-02vue入门之组件

    删除Vue cli预设 在用户根目录下 C Users 你的用户名 这个地址里有一个 vuerc 文件 修改或删除配置 组件 Props 组件之间的数据传递 Prop 的大小写 camelCase vs kebab case 不敏感 Pro

  • 线程同步概念

    带着问题去思考 什么是线程同步 线程同步能解决哪些问题 如何实现线程同步 线程同步是指两个或多个线程协同步调 按预期的顺序执行代码 若两个或多个线程同时写同一块内存或访问同一资源时 需线程同步 若线程A的执行依赖线程B的结果 需线程同步 输

  • 在外部js文件中直接调用vue文件中自定义的方法

    1 在vue文件引入API import getCurrentInstance onMounted from vue onMounted 用于挂载数据 getCurrentInstance 用于获取实例后再使用 2 定义setup 方法 s

热门标签