我正在將應用程式從 vue 2 升級到 vue 3，但我遇到了一些可組合的問題。我想在可組合中使用道具，但它似乎不起作用。代碼示例是從一個作業組件中提取的，當我將它留在組件中時可以正常作業。
我認為defineProps可組合物不支持，但我不清楚如何處理它。當我傳入src引數時，它會失去反應性。
// loadImage.js
import { defineProps, onMounted, ref, watch } from 'vue'
// by convention, composable function names start with "use"
export function useLoadImage() {
let loadingImage = ref(true)
let showImage = ref(false)
const props = defineProps({
src: String,
})
const delayShowImage = () => {
setTimeout(() => {
showImage.value = true
}, 100)
}
const loadImage = (src) => {
let img = new Image()
img.onload = (e) => {
loading.value = false
img.onload = undefined
img.src = undefined
img = undefined
delayShowImage()
}
img.src = src
}
onMounted(() => {
if (props.src) {
loadImage(props.src)
}
})
watch(
() => props.src,
(val) => {
if (val) {
loadingImage.value = true
loadImage(val)
}
},
)
// expose managed state as return value
return { loadingImage, showImage }
}
編輯
這種方法對我有用，但下面評論中提到的兩種方法都沒有。
我有一個新問題。
// loadImage.js
import { onMounted, ref, watch } from 'vue'
// by convention, composable function names start with "use"
export function useLoadImage?ops) {
let loadingImage = ref(true)
let showImage = ref(false)
const delayShowImage = () => {
setTimeout(() => {
showImage.value = true
}, 100)
}
const loadImage = (src) => {
let img = new Image()
img.onload = (e) => {
loading.value = false
img.onload = undefined
img.src = undefined
img = undefined
delayShowImage()
}
img.src = src
}
onMounted(() => {
if (props.src) {
loadImage(props.src)
}
})
watch(
() => props.src,
(val) => {
if (val) {
loadingImage.value = true
loadImage(val)
}
},
)
// expose managed state as return value
return { loadingImage, showImage }
}
<script setup>
import { defineProps, toRef } from 'vue'
import { useLoadImage } from '../../composables/loadImage'
const props = defineProps({
src: String
})
const { loading, show } = useLoadImage(props)
</script>
uj5u.com熱心網友回復：
根據官方檔案：
defineProps并且defineEmits編譯器宏只能在內部使用<script setup>
您應該傳遞propsas 引數而不破壞它們以不失去反應性：
export function useLoadImage(props) {
....
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/481872.html
標籤：Vue.js Vuejs3 vue-composition-api vue 脚本设置
上一篇：vuex在組件函式中調度動作