如何在 Vue 組件中使用 Vanilla Javascript Class？

Question

我有一個 laravel 項目，它在app.js文件中全局注冊 vue。 Vue 在我的項目中工作，因為我在我的應用程序的另一部分工作。 這種情況的獨特之處在於我沒有像刀片文件這樣的地方來傳遞我的 vue 組件作為要使用的媒介。 我有一個香草 js 文件和一個 vue 組件。 我希望能夠在我的testing.vue文件中使用我的test.js文件中創建的方法。 我只是想將一些數據從我的 js 傳遞到我的 vue，然后console.log()將其傳遞出去，以確保數據被正確傳遞。 我確實使用npm run dev來編譯資產。 在這一點上，代碼是相當樣板，因為我現在的主要目標是正確傳遞數據。 我也確認了導入路徑，它是正確的。 不知道為什么console.log()沒有顯示在瀏覽器中。 這是我當前的代碼：

測試.js

export class Test {
    testing() {
        console.log('this is a test');
    }
} 

測試.vue

<template>
  <div>

  </div>
</template>

<script>
import {Test} from '../../js/Test';

export default {
  name: 'Testing',
  mounted() {
    console.log(Test.testing());
  }
}
</script>

Answer 1

您必須創建Test class 的實例才能使用該方法。 在您的Testing.vue文件中：

<template>
  <div>

  </div>
</template>

<script>
  import {Test} from '../../js/Test';

  export default {
    name: 'Testing',
    
    mounted() {
      // IMPORTANT to create instance of a class
      const myTestInstance = new Test();
      
      console.log(myTestInstance.testing());
    }
  }
</script>

class Test上的方法testing()不是 static 方法，因此需要 object 來調用。 或者，如果您不想創建 object，則可以將方法聲明為 static，如下所示：

export class Test {
    static testing() {
        console.log('this is a test');
    }
}

然后你可以像這樣使用它： Test.testing() 。