這篇文章運用簡單易懂的例子給大家介紹如何實現在JS文件中獲取Vue組件，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
1. 背景
最近在寫項目時候遇到這樣一個需求：
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.js4. 代碼實現
在 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組件就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
