如何在JS文件中获取Vue组件


Posted in Javascript onSeptember 16, 2020

1. 背景

最近在写项目时候遇到这样一个需求:

  • 我封装了一个js文件 utils.js,然后在组件 my-component.vue 中引用了该js文件。
  • utils.js 文件中有一些函数,需要操作 my-component.vue 中的 datamethods

为了方便理解,上述 js 文件和组件名非实际工程中的名字,仅是示例。

2. 思路

通过调用函数把 组件实例 this 传递到 被应用的 js 文件 里。

3. 目录结构

src/
├── App.vue
├── assets
├── main.js
├── components
└── views
  └── demo
    ├── my-component.vue
    └── utils.js

4. 代码实现

utils.js 中定义一个变量和一个函数,该变量用于存放组件实例 this,该函数用于接收组件实例 this

utils.js

// 用来存放调用此js的vue组件实例(this)
let vm = null

const sendThis = ( _this )=> {
  vm = _this
}

export default {
  sendThis, // 暴露函数
  description: '我是一个工具类方法',
  getData() {
    console.log(vm) // 打印拿到的组件实例
    console.log(vm.userProfile) // 打印组件中的data
  },
  callMethod() {
   vm.clearForm() // 调用组件中的methods
  }
}

my-component.vue 中引入 utils.js,然后在钩子函数中调用 utils.js sendThis 方法,把 this 传过去即可。

my-component.vue

<template>
 <div class="my-component"></div>
</template>

<script>
import utils from './utils'

export default {
 name: 'MyComponent',
 data() {
  return {
   userProfile: ''
  }
 },
 mounted() {
  // 发送this 到 js 文件里
  utils.sendThis(this);
 },
 methods: {
  // 这个函数会在 utils.js 文件中被调用
  clearForm() {
   // 执行一些操作
  },
  // 打印 utils.js 中的 description
  showMsg() {
   console.log(utils.description)
  }
 }
}
</script>

5. 其它思路

还有一种思路:

把一些属性和方法挂载到 vue 实例原型上,自然也就可以在某个 js 文件中拿到 vue 实例了。

以上就是如何在JS文件中获取Vue组件的详细内容,更多关于在JS文件中获取Vue组件的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JS 类型转换常见方法小结
May 31 Javascript
JS中的prototype与面向对象的实例讲解
May 22 Javascript
jQuery中:gt选择器用法实例
Dec 29 Javascript
jQuery判断数组是否包含了指定的元素
Mar 10 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 Javascript
微信小程序倒计时功能实现代码
Nov 09 Javascript
说说node中的可读流和可写流的区别
Jun 01 Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 Javascript
javascript自定义加载loading效果
Sep 15 #Javascript
图解JS原型和原型链实现原理
Sep 15 #Javascript
vue实现简单全选和反选功能
Sep 15 #Javascript
vscode 调试 node.js的方法步骤
Sep 15 #Javascript
js实现特别简单的钟表效果
Sep 14 #Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 #Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 #Javascript
You might like
.htaccess文件保护实例讲解
2011/02/06 PHP
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
Jquery带搜索框的下拉菜单
2013/05/06 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
jQuery之字体大小的设置方法
2014/02/27 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
Bootstrap每天必学之弹出框(Popover)插件
2016/04/25 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
2017/01/20 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
Python类的继承用法示例
2019/01/31 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
Python调用ffmpeg开源视频处理库,批量处理视频
2020/11/16 Python
大专毕业生简历的自我评价
2013/10/20 职场文书
团日活动策划书
2014/02/01 职场文书
酒店开业庆典策划方案
2014/05/28 职场文书
公司任命书范本
2014/06/04 职场文书
人身损害赔偿协议书
2016/03/22 职场文书
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏