如何在JS文件中获取Vue组件
更新时间：2020年09月16日 09:13:21 作者：文渊
这篇文章主要介绍了如何在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）
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组件的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了Vue-extend和VueComponent问题,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue实现可搜索的下拉菜单组件功能，在文中通过实例代码给大家补充介绍了vue组件实践-可搜索下拉框，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
前端Vue设置cookie、删除cookie,获取cookie方式
这篇文章主要介绍了前端Vue设置cookie、删除cookie，获取cookie方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
安装vue-cli的前提是你已经安装了npm，安装npm你可以直接下载node的安装包进行安装。接下来通过本文给大家介绍安装vue-cli的简易过程，感兴趣的朋友跟随脚本之家小编一起学习吧2018-05-05
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
这篇文章主要介绍了VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
这篇文章主要介绍了Vue+webpack实现懒加载过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
解决nuxt页面中mounted、created、watch执行两遍的问题
这篇文章主要介绍了解决nuxt页面中mounted、created、watch执行两遍的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue项目中禁用浏览器缓存配置案例,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了Vue框架里使用Swiper的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了Vue组件中的自定义事件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
最新评论