Vue—外部JS引用main.js中Vue组件实例的方法

最新推荐文章于 2024-05-24 09:31:07 发布
最新推荐文章于 2024-05-24 09:31:07 发布
阅读量5.9k 收藏 2
点赞数 2
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42472040/article/details/111104477
版权
Vue 专栏收录该内容
57 篇文章 28 订阅 ¥19.90 ¥99.00
订阅专栏

目录

一、概述

二、详解

一、概述

vue组件中的this一般指向main.js中的Vue实例，故可以直接引用之。实际开发中，希望在外部JS中也可以引用main.js中的Vue实例，但外部JS中的this一般指向window，而非期待的Vue实例。解决方法也简单，只须在main.js中导出Vue实例，并在需要的外部JS文件中引入即可。

二、详解

步骤1：导出main.js中的Vue实例

步骤2：在需要的外部JS文件中引入

import vueMain from '@/main.js'

 

空城里的往日时光
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
vue3在main.js里面定义全局函数，然后其他页面使用
肖肖肖丽珠的博客
08-01 2630
this.proxy.$comfimBox('删除').then(res=>{confirmButtonText'确定',cancelButtonText'取消',type'提示',
vue main.js中引入js_VUE实战技巧，让你的代码少一点
weixin_39533896的博客
11-20 2267
这三个小技巧应该熟知：组件 : 全局组件注册Vue权限控制 : 高精度全局权限控制Render函数 : 拯救繁乱的template路由分区以及动态添加路由「全局组件注册」创建全局.js文件管理全局组件// 1 - globalComponent.js中可以这么封装↓import Vue from 'vue' // 引入vue// 处理首字母大写 abc => Abcfunction chan...
vue main.js中引入js_手把手教你深入Vue3.0(Vue-cli4)项目打包性能优化实践
weixin_39625305的博客
10-21 908
记录了自己的博客在禁用缓存的情况下，从八九秒加载时间到最终985ms的优化实践，开启缓存的情况下能达到138ms的访问速度本人的个人博客采用的是Vue-cli4.1.2 + typescript构建的，项目目录结构如下├─ src //主文件│ ├─ api //接口文件夹| | |- config.js //后端接口地址的配置,将测试、开发、生产环境分开| | └─ ...
vue组件内引入外部js, 外部js调用组件内的方法
最新发布
springdk2009的博客
05-24 918
方式一：vue组件中的方法先调用外部js 中的方法，外部js再调用vue组件中其它方法。test.js 为主js文件，里面引入了a.js和b.js文件。外部js文件test.js: 使用 window.test2()调用。vue组件中引入外部js,并调用外部js 中的方法。方式二：外部js直接调用vue组件中的方法。外部js 中调用vue组件中的方法。5. 外部主js文件调用其它js中的方法。5.3 调用a.js和b.js文件方法。4. 外部js调用vue组件中的方法。5.1 引入a.js和b.js文件。
vue 如何引入js文件
weixin_54259790的博客
05-14 818
vue 如何引入js文件 如这个文件，我怎么在main.js中引入呢 就是这样：这两种方法都可以 让我们看看效果 第一种 main.js 中引入 permission.js 效果： 第二种： main.js permission.js 效果：
Vue 项目中 main.js、App.vue、index.html、index.js 组件的作用
生化环材
03-05 3814
Vue 项目中 main.js、App.vue、index.html、index.js 组件的作用 index.html 项目的运行入口，在body体中只有一个 div 标签，其 id 为 app，这个 id 将会连接到 src/main.js 内容。 在浏览器打开的瞬间，浏览器中正文部分会瞬间显示index.html 中定义的正文部分。上面有一个 id 为 app 的挂载点，之后我们的 Vue 根实例就会挂载到该挂载点上 <!DOCTYPE html> <html> <h
vue项目中,main.js,App.vue,index.html的调用方法
01-19
1、main.js是我们的入口文件，主要作用是初始化vue实例，并引入所需要的插件 2、App.vue是我们的主组件，所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router...
vue项目main.js使用方法
01-21
src/main.js是入口文件，主要作用是初始化vue实例并使用需要的插件 在main.js文件中定义了一个vue对象,其中el为实例提供挂载元素 //基础设置 import Vue from ‘vue' //引入路由和vuex import router from './router...
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
10-14
总结来说，main.js是应用的核心，负责初始化Vue实例和配置；App.vue是应用的顶级组件，提供了一个容器来展示路由切换的各个视图；page/index.vue等页面组件则代表具体的视图，它们可以通过路由被渲染到App.vue的`...
详解vue文件中使用echarts.js的两种方式
10-17
在Vue项目中集成ECharts.js，通常有两种常见的方式：一种是通过组件的形式，另一种是直接在Vue文件中引入。这两种方法都有其优缺点，适用于不同的项目需求。 首先，我们来看第一种方式，即以组件的形式使用ECharts...
vue.js单文件组件中非父子组件的传值实例
10-18
总结来说，Vue.js中的非父子组件通信可以通过创建一个全局的Vue实例（事件总线）来实现。组件之间通过`$emit`发送事件，其他组件通过`$on`监听并处理这些事件。这种方法提供了一种灵活的方式，使得任何组件都可以...
vue中配置axios教程-定稿版（二）——自定义接口文件和main.js引入文件
weixin_44867717的博客
07-05 620
vue中配置axios教程-定稿版（二）——自定义接口文件和main.js引入文件 第三步:在src/main.js中进行引入 import axios from '@/api' Vue.prototype.$http = axios 第二步:在api文件夹下，index.js同层级， 新建自定义接口集合（页面一级菜单knowledge模块所有接口）文件夹-knowledge， knowledge文件夹中新建二级菜单entityType界面所有接口-entityType.js 完整代码-src/api/
2020-09-08
qq_44773168的博客
09-08 383
ES6的模块化 (1) export 导出 {} {}不是对象,可以同时导出多次 let a = 1; let b = 2; export{a}; export{b}; 等价于 export{a,b} (2) export default {} {}内是对象,只能导出一次 let a = 1; let b = 2; export{a,b}； 不管export default导出的是什么，导入的时候都可以使用任意一个变量 (3) import 导入 由于nodejs不支持E
获取及设置 Vue3 全局变量
weixin_50368372的博客
12-20 3933
globalProperties: 一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。
vue中全局变量
sumiao64427的博客
08-26 1888
vue中全局变量
vue3在外部js文件调用vue内的方法
qq_52959651的博客
03-31 6683
需求就是我在vue项目里有一个a.js文件，我想在a.js文件里调用b.vue里的test方法。 直接上代码 a.js export default { hotmockobjId: function () { //逻辑代码 ....... //调用b.vue的方法名 test() } } b.vue import {defineComponent, onMounted} from 'vue'//引入方法 setup() { onMounted(() => {
VUE的引入以及基本使用
qq_58805860的博客
04-05 9802
VUE的简单概述和基本使用方法
【vue引用外部JS,并调用JS文件中的方法】
qq_39236283的博客
12-09 6785
vue引用外部JS,并调用JS文件中的方法
怎么将Vue.js中的其他组件导入到main.js中
06-12
在Vue.js中，可以使用import语句将其他组件导入到main.js中。在main.js中，你可以将导入的组件注册为全局组件，或者在Vue实例中局部注册。 下面是一个示例，假设我们有一个名为HelloWorld的Vue组件，并且它位于src/...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值