如何實現(xiàn)在JS文件中獲取Vue組件

發(fā)布時間：2020-11-03 17:50:32 來源：億速云閱讀：435 作者：Leah 欄目：開發(fā)技術(shù)

這篇文章運用簡單易懂的例子給大家介紹如何實現(xiàn)在JS文件中獲取Vue組件，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

1. 背景

最近在寫項目時候遇到這樣一個需求：

我封裝了一個js文件 utils.js，然后在組件 my-component.vue 中引用了該js文件。
在 utils.js 文件中有一些函數(shù)，需要操作 my-component.vue 中的 data 和 methods。

為了方便理解，上述 js 文件和組件名非實際工程中的名字，僅是示例。

2. 思路

通過調(diào)用函數(shù)把組件實例 this 傳遞到被應(yīng)用的 js 文件里。

3. 目錄結(jié)構(gòu)

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 實例了。

關(guān)于如何實現(xiàn)在JS文件中獲取Vue組件就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

如何實現(xiàn)在JS文件中獲取Vue組件

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽