如何在JS文件中獲取Vue組件
1. 背景
最近在寫(xiě)項(xiàng)目時(shí)候遇到這樣一個(gè)需求：
- 我封裝了一個(gè)js文件
utils.js，然后在組件my-component.vue中引用了該js文件。 - 在
utils.js文件中有一些函數(shù)，需要操作my-component.vue中的data和methods。
為了方便理解，上述 js 文件和組件名非實(shí)際工程中的名字，僅是示例。
2. 思路
通過(guò)調(diào)用函數(shù)把 組件實(shí)例 this 傳遞到 被應(yīng)用的 js 文件 里。
3. 目錄結(jié)構(gòu)
src/
├── App.vue
├── assets
├── main.js
├── components
└── views
└── demo
├── my-component.vue
└── utils.js
4. 代碼實(shí)現(xiàn)
在 utils.js 中定義一個(gè)變量和一個(gè)函數(shù)，該變量用于存放組件實(shí)例 this，該函數(shù)用于接收組件實(shí)例 this。
utils.js
// 用來(lái)存放調(diào)用此js的vue組件實(shí)例（this）
let vm = null
const sendThis = ( _this )=> {
vm = _this
}
export default {
sendThis, // 暴露函數(shù)
description: '我是一個(gè)工具類(lèi)方法',
getData() {
console.log(vm) // 打印拿到的組件實(shí)例
console.log(vm.userProfile) // 打印組件中的data
},
callMethod() {
vm.clearForm() // 調(diào)用組件中的methods
}
}
在 my-component.vue 中引入 utils.js，然后在鉤子函數(shù)中調(diào)用 utils.js 的 sendThis 方法，把 this 傳過(guò)去即可。
my-component.vue
<template>
<div class="my-component"></div>
</template>
<script>
import utils from './utils'
export default {
name: 'MyComponent',
data() {
return {
userProfile: ''
}
},
mounted() {
// 發(fā)送this 到 js 文件里
utils.sendThis(this);
},
methods: {
// 這個(gè)函數(shù)會(huì)在 utils.js 文件中被調(diào)用
clearForm() {
// 執(zhí)行一些操作
},
// 打印 utils.js 中的 description
showMsg() {
console.log(utils.description)
}
}
}
</script>
5. 其它思路
還有一種思路：
把一些屬性和方法掛載到 vue 實(shí)例原型上，自然也就可以在某個(gè) js 文件中拿到 vue 實(shí)例了。
以上就是如何在JS文件中獲取Vue組件的詳細(xì)內(nèi)容，更多關(guān)于在JS文件中獲取Vue組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
關(guān)于Vue-extend和VueComponent問(wèn)題小結(jié)
這篇文章主要介紹了Vue-extend和VueComponent問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue實(shí)現(xiàn)可搜索的下拉菜單組件功能，在文中通過(guò)實(shí)例代碼給大家補(bǔ)充介紹了vue組件實(shí)踐-可搜索下拉框，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
前端Vue設(shè)置cookie、刪除cookie,獲取cookie方式
這篇文章主要介紹了前端Vue設(shè)置cookie、刪除cookie，獲取cookie方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
安裝vue-cli的前提是你已經(jīng)安裝了npm，安裝npm你可以直接下載node的安裝包進(jìn)行安裝。接下來(lái)通過(guò)本文給大家介紹安裝vue-cli的簡(jiǎn)易過(guò)程，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
VUE2.0+ElementUI2.0表格el-table循環(huán)動(dòng)態(tài)列渲染的寫(xiě)法詳解
這篇文章主要介紹了VUE2.0+ElementUI2.0表格el-table循環(huán)動(dòng)態(tài)列渲染的寫(xiě)法詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
Vue+webpack實(shí)現(xiàn)懶加載過(guò)程解析
這篇文章主要介紹了Vue+webpack實(shí)現(xiàn)懶加載過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
解決nuxt頁(yè)面中mounted、created、watch執(zhí)行兩遍的問(wèn)題
這篇文章主要介紹了解決nuxt頁(yè)面中mounted、created、watch執(zhí)行兩遍的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要介紹了vue項(xiàng)目中禁用瀏覽器緩存配置案例,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了Vue框架里使用Swiper的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了Vue組件中的自定義事件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02