我正在使用 Vue 3 和 TS，我在Setup函式中有一些像這樣的狀態
export default defineComponent({
setup() {
const isLoadingSendData = ref(false)
return { isLoadingSendData }
},
methods: {
disableBtn(): boolean {
// on Webstorm i got error: TS2339: Property 'isLoadingSendData' doesn't exist
// on type 'disableBtn(): boolean'
if(this.isLoadingSendData) {
return // do something
}
return // do something
}
}
})
這只是我可以舉一個案例的例子，this.isLoadingSendData我的 IDE 上出現紅色錯誤，有人知道為什么嗎？
uj5u.com熱心網友回復：
options api中不能呼叫composition apisetup()變數methods, data, etc，如果要在里面宣告一個方法composition api，是這樣的：
export default defineComponent({
setup() {
const isLoadingSendData = ref(false);
const disableBtn = (): boolean => {
if (this.isLoadingSendData.value) {
return; // do something
}
return; // do something
};
return { isLoadingSendData, disableBtn };
}
});
如果你想使用options api，你可以這樣宣告：
export default defineComponent({
data() {
return {
isLoadingSendData: false
};
},
methods: {
disableBtn(): boolean {
if (this.isLoadingSendData) {
return; // do something
}
return; // do something
}
}
});
所以選擇是您使用composition api或options api.
此外，還有另一種語法composition api，即使用<script setup>標記。你可以這樣宣告：
<script setup lang="ts">
import { ref } from "vue";
const isLoadingSendData = ref(false);
const disableBtn = (): boolean => {
if (this.isLoadingSendData.value) {
return; // do something
}
return; // do something
};
</script>
您可以在<script setup>標簽中訪問template標簽內的所有內容
uj5u.com熱心網友回復：
如果您將 Vue 3 與 setup 函式一起使用，則不需要methods像 Vue 2 和其他先前版本的 Vue 中那樣使用函式。您可以簡單地從 setup 函式的回傳物件中參考模板中的所有內容。還要確保使用 lang="ts" 將腳本部分括起來以支持 TypeScript。
<script lang="ts">
export default defineComponent({
setup() {
const isLoadingSendData = ref(false)
return { isLoadingSendData }
}
})
</script>
<template>
<div v-if="isLoadingSendData">
<p>Loading...</p>
</div>
<div v-else>
<p>Finished Loading</p>
</div>
</template>
uj5u.com熱心網友回復：
只是為已經很好的答案添加更多資訊。Vue3 還有另一個選項稱為設定腳本，它更簡單。我還推薦使用 Volar 擴展而不是 Vetur 以獲得最新的 Vue 設定語法
<script setup lang="ts">
import { ref, Ref, computed, ComputedRef } from "vue";
const isLoadingSendData: Ref<boolean> = ref(false);
//You could use the `ref` above on the template already,
//but in case you want a computed value
const disableBtn: ComputedRef<boolean> = computed((): boolean => {
return !isLoadingSendData.value
})
</script>
<template>
<div>
<button v-show="disableBtn">disabled button</button>
<button v-show="!disableBtn">normal button</button>
</div>
</template>
您不需要回傳任何內容，因為 de setup 腳本已經將其值提供給模板。而不是使用函式或計算來檢查加載狀態，您可以直接使用 ref :)
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/414933.html
標籤：