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 = nullconst 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組件的資料請關注好吧啦網其它相關文章！