假設我在 vue 中有這樣的腳本
<script>
export default {
name: "BaseCardAnnotationOption",
data() {
return {
includeAnnotations1: false,
embedIntoImage: null,
burnIntoImage: null,
burnReduction1: false,
maintainColor1: false,
annotationOption1: null
};
},
methods: {
deselectDisabled() {
return this.includeAnnotations1 === false
? ((this.annotationOption1 = null), (this.maintainColor1 = false))
: ((this.annotationOption1 = 0), (this.maintainColor1 = false));
}
}
};
</script>
我在其他 4 或 5 個地方使用資料變數和方法。有沒有辦法可以將所有這些放在一個新檔案中，并在需要時從組件中呼叫它們。謝謝
uj5u.com熱心網友回復：
您可以使用 mixins 來定義一些選項并在您的組件中重用它們，創建一個名為someMixins.js以下內容的檔案：
export default const someMixins={
data() {
return {
includeAnnotations1: false,
embedIntoImage: null,
burnIntoImage: null,
burnReduction1: false,
maintainColor1: false,
annotationOption1: null
};
},
methods: {
deselectDisabled() {
return this.includeAnnotations1 === false
? ((this.annotationOption1 = null), (this.maintainColor1 = false))
: ((this.annotationOption1 = 0), (this.maintainColor1 = false));
}
}
}
然后將其匯入組件中并按如下方式使用：
<script>
import someMixins from 'path/to/someMixins.js'
export default {
name: "BaseCardAnnotationOption",
mixins:[someMixins]
}
uj5u.com熱心網友回復：
只是對 Boussadjra Brahim 回應的補充，如果您使用的是 Vue 3，您可以在整個代碼的“腳本設定”中匯入您的函式。
在“../module.js”之類的檔案或您喜歡的其他檔案中：
export function deselectDisabled() {
// Here you will need to modify and adapt your function to use callbacks.
}
然后你可以匯入它并像這樣使用它：
<script setup>
import { deselectDisabled } from './module.js
// Now you can use your function all over your vue file.
...
</script>
這是 vue 3 正在實施的新的“語法糖”，它對大型專案非常有幫助。您可以在此處查看更多資訊：https : //v3.vuejs.org/api/sfc-script-setup.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/406888.html
標籤：