如何在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 相关文章推荐
JavaScript SetInterval与setTimeout使用方法详解
Nov 15 Javascript
jQuery中 prop() attr()使用详解
May 19 Javascript
JQuery动态添加Select的Option元素实现方法
Aug 29 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
vue做网页开场视频的实例代码
Oct 20 Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
Nov 01 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 Javascript
JS实现扫雷项目总结
May 19 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的面向对象编程
2006/10/09 PHP
测试PHP连接MYSQL成功与否的代码
2013/08/16 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
探讨jQuery的ajax使用场景(c#)
2013/12/03 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
jquery+css3打造一款ajax分页插件(自写)
2014/06/18 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
2016/09/28 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
python 实现红包随机生成算法的简单实例
2017/01/04 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
母亲节演讲稿范文
2014/01/02 职场文书
竞争上岗演讲稿范文
2014/05/12 职场文书
条幅标语大全
2014/06/20 职场文书
音乐教师求职信
2014/06/28 职场文书
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
群众路线教育实践活动学习笔记
2014/11/05 职场文书
倡议书格式及范文
2015/04/29 职场文书
三国演义读书笔记
2015/06/25 职场文书
小学课改工作总结
2015/08/13 职场文书
JavaScript继承的三种方法实例
2021/05/12 Javascript
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js