如何在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控制iframe的高度/宽度让其自适应内容
Apr 09 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
Mar 21 Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
EasyUI布局 高度自适应
Jun 04 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
动态Axios的配置步骤详解
Jan 12 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
Apr 14 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
Aug 20 Javascript
比较node.js和Deno
Apr 27 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
php单例模式的简单实现方法
2016/06/10 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
PHP微信分享开发详解
2017/01/14 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
图片上传即时显示缩略图的js代码
2009/05/27 Javascript
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
jQuery的bind()方法使用详解
2015/07/15 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
jQuery解决$符号命名冲突
2016/06/18 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
webpack3之loader全解析
2017/10/26 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
Vuex mutitons和actions初使用详解
2019/03/04 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
python下如何让web元素的生成更简单的分析
2008/07/17 Python
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
浅析python继承与多重继承
2018/09/13 Python
Django模板Templates使用方法详解
2019/07/19 Python
Python requests获取网页常用方法解析
2020/02/20 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
电脑教师的教学自我评价
2013/11/26 职场文书
应届大学生自荐信
2013/12/05 职场文书
五十岁生日宴会答谢词
2014/01/15 职场文书
大学生求职信
2014/06/17 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书