如何在JS文件中獲取Vue組件
更新時間：2020年09月16日 09:13:21 作者：文淵
這篇文章主要介紹了如何在JS文件中獲取Vue組件，幫助大家更好的理解和學(xué)習(xí)前端知識，感興趣的朋友可以了解下
1. 背景
最近在寫項(xiàng)目時候遇到這樣一個需求：
- 我封裝了一個js文件
utils.js，然后在組件my-component.vue中引用了該js文件。 - 在
utils.js文件中有一些函數(shù)，需要操作my-component.vue中的data和methods。
為了方便理解，上述 js 文件和組件名非實(shí)際工程中的名字，僅是示例。
2. 思路
通過調(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 中定義一個變量和一個函數(shù)，該變量用于存放組件實(shí)例 this，該函數(shù)用于接收組件實(shí)例 this。
utils.js
// 用來存放調(diào)用此js的vue組件實(shí)例（this）
let vm = null
const sendThis = ( _this )=> {
vm = _this
}
export default {
sendThis, // 暴露函數(shù)
description: '我是一個工具類方法',
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 傳過去即可。
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: {
// 這個函數(shù)會在 utils.js 文件中被調(diào)用
clearForm() {
// 執(zhí)行一些操作
},
// 打印 utils.js 中的 description
showMsg() {
console.log(utils.description)
}
}
}
</script>
5. 其它思路
還有一種思路：
把一些屬性和方法掛載到 vue 實(shí)例原型上，自然也就可以在某個 js 文件中拿到 vue 實(shí)例了。
以上就是如何在JS文件中獲取Vue組件的詳細(xì)內(nèi)容，更多關(guān)于在JS文件中獲取Vue組件的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了vue踩坑之在input中使用filters局部過濾器問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
setup函數(shù)是一個新的組件選項(xiàng),作為在組件內(nèi)使用Composition Api的入口點(diǎn),下面這篇文章主要給大家介紹了關(guān)于vue3.0中setup的兩種用法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
vue如何使用watch監(jiān)聽指定數(shù)據(jù)的變化
這篇文章主要介紹了vue如何使用watch監(jiān)聽指定數(shù)據(jù)的變化，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
說起canvas是css3新增的標(biāo)簽,而餅狀圖又是canvas經(jīng)典,我們公司現(xiàn)在正在用uni-app框架去研發(fā)APP,下面這篇文章主要給大家介紹了關(guān)于Vue和uniapp中該如何使用canvas的相關(guān)資料,需要的朋友可以參考下2022-10-10
Vue-Router基礎(chǔ)學(xué)習(xí)筆記(小結(jié))
這篇文章主要介紹了Vue-Router基礎(chǔ)學(xué)習(xí)筆記(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
vue項(xiàng)目實(shí)現(xiàn)文件下載進(jìn)度條功能
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)文件下載進(jìn)度條功能,本文通過具體實(shí)現(xiàn)代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2021-09-09
Vue項(xiàng)目history模式下微信分享爬坑總結(jié)
這篇文章主要介紹了Vue項(xiàng)目history模式下微信分享爬坑總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)樹狀表格效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
關(guān)于Ant-Design-Vue快速上手指南+排坑
這篇文章主要介紹了關(guān)于Ant-Design-Vue快速上手指南+排坑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了如何使用RoughViz可視化Vue.js中的草繪圖表，幫助大家更好的理解和使用roughViz，感興趣的朋友可以了解下2021-01-01