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