從外部腳本更改或訪問 Vue.js 方法

Question

我有一個基於 Webpack 的 Vue 應用程序。 該組件有幾個簡單的計算屬性，例如從輸入中獲取總和。 但是現在我需要能夠從與當前程序集無關的外部文件中替換求和函數，以及將按鈕（和）其他函數從該文件添加到當前模板的能力 - 減法、乘法、除法取決於從外部文件設置的標志（隱藏/顯示）。 接近它的最佳方法是什么？ 有什么想法嗎？

謝謝

Answer 1

我認為將函數放在.vue組件之外並不是一個壞主意。 這樣就可以更容易地創建純組件，只需從這些文件中導出這些函數 - 您的.vue組件可以導入它們。 （但我認為這是一種你要么使用要么不使用的自以為是的模式。）

下面的代碼片段僅表明向Vue組件（或本例中的實例）添加外部函數很簡單：

 const sumFunction = (a, b) => { return a + b } new Vue({ el: "#app", computed: { result() { return sumFunction(Number(this.a), Number(this.b)) } }, data() { return { a: 0, b: 0 } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <input type="number" v-model="a" /><br /> <input type="number" v-model="b" /><br /> a + b = {{result}} </div>

因此，您的文件可能如下所示：

externalFunction.js：

export const sumFunction = (a, b) => {
  return a + b
}

sumTemplate.vue:

<template>
  <div>
    <input type="number" v-model="a" /><br />
    <input type="number" v-model="b" /><br />
    a + b = {{result}}
  </div>
</template>
<script>
import { sumFunction } from "@externalFunction"

export default {
  computed: {
    result() {
      return sumFunction(Number(this.a), Number(this.b))
    }
  },
  data() {
    return {
      a: 0,
      b: 0
    }
  }
}
</script>

唯一需要強調的是：有了這個設置，單元測試有了更重要的作用。 您必須注意函數的輸入和輸出，因此當您更改它們時，不會有組件損壞。