如何在JS文件中获取Vue组件
1.背景
最近在写项目时候遇到这样一个需求：
- 我封装了一个js文件utils.js，然后在组件my-component.vue中引用了该js文件。
- 在utils.js文件中有一些函数，需要操作my-component.vue中的data和methods。
为了方便理解，上述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）
letvm=null
constsendThis=(_this)=>{
vm=_this
}
exportdefault{
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
5.其它思路
还有一种思路：
把一些属性和方法挂载到vue实例原型上，自然也就可以在某个js文件中拿到vue实例了。
以上就是如何在JS文件中获取Vue组件的详细内容，更多关于在JS文件中获取Vue组件的资料请关注毛票票其它相关文章！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。