在 Vue3 中将单个属性传递给可组合项

Question

我正在使用可组合项在 Vue3 中加载图像。我已经能够将所有道具作为一个对象成功传递，请参阅这个问题，但我无法传递我想要反应的一个属性。我相当确定问题在于未定义的属性

\n

// loadImage.js\nimport { onMounted, ref, watch } from \'vue\'\n\n// by convention, composable function names start with "use"\nexport function useLoadImage(src) {\n  let loading = ref(true)\n  let show = ref(false)\n\n  const delayShowImage = () => {\n    setTimeout(() => {\n      show.value = true\n    }, 100)\n  }\n  const loadImage = (src) => {\n    let img = new Image()\n    img.onload = (e) => {\n      loading.value = false\n      img.onload = undefined\n      img.src = undefined\n      img = undefined\n      delayShowImage()\n    }\n    img.src = src\n  }\n  onMounted(() => {\n    if (src) {\n      loadImage(src)\n    }\n  })\n  watch(\n    () => src,\n    (val) => {\n      if (val) {\n        loading.value = true\n        loadImage(val)\n      }\n    },\n  )\n  // expose managed state as return value\n  /**\n   * loading is the image is loading\n   * show is a delayed show for images that transition.\n   */\n  return { loading, show }\n}\n\n

\n

下面的方法在 console.log 中返回此内容并且不会出错。

\n

Proxy\xc2\xa0{src: undefined} undefined

\n

<script setup>\nimport { defineProps, computed } from \'vue\'\nimport { useLoadImage } from \'../../composables/loadImage\'\n\nconst props = defineProps({\n  src: String\n})\n\nconsole.log(props, props.src)\nconst srcRef = computed(() => props.src)\nconst { loading, show } = useLoadImage(srcRef)\n</script>\n

\n

以下方法在 console.log 中返回此内容

\n

Proxy\xc2\xa0{src: undefined} undefined

\n

并给出以下错误

\n

TypeError: Cannot read properties of undefined (reading \'undefined\')

\n

<script setup>\nimport { defineProps, toRef } from \'vue\'\nimport { useLoadImage } from \'../../composables/loadImage\'\n\nconst props = defineProps({\n  src: String\n})\n\nconsole.log(props, props.src)\nconst srcRef = toRef(props.src)\nconst { loading, show } = useLoadImage(srcRef)\n</script>\n

\n

Answer 1

正如评论中所示，它似乎src在undefined您的组件中，因为您可能没有将 prop 正确传递给组件。

\n

即src使用字符串设置，仍然会出现一些其他问题：

\n

\n

1. toRef\ 的第一个参数应该是一个reactive对象（即props），第二个参数应该是键的名称（即\'src\'）：

   \n

   // MyComponent.vue\n\nconst srcRef = toRef(props.src) \xe2\x9d\x8c\nconst srcRef = toRef(props, \'src\') \xe2\x9c\x85\n

   \n

   注意：const srcRef = computed(() => props.src)正如您最初所做的那样，使用 也是有效的。

   \n
\n

2. watch\ 的第一个参数是WatchSource. 当WatchSource函数处理 a时ref，它应该返回ref\ 的未包装值。或者， 也WatchSource可以是它ref本身：

   \n

   // loadImage.js\n\nwatch(() => srcRef, /* callback */) \xe2\x9d\x8c\nwatch(() => srcRef.value, /* callback */) \xe2\x9c\x85\nwatch(srcRef, /* callback */) \xe2\x9c\x85\n

   \n
\n

3. 可组合项接收 a 中的图像源ref，并且您的onMounted()钩子将其传递给ref，它实际上期望\ 的展开值loadImage()中的字符串：ref

   \n

   // loadImage.js\n\nonMounted(() => {\n  if (src) { \xe2\x9d\x8c /* src is a ref in this composable */\n    loadImage(src)\n  }\n})\n\nonMounted(() => {\n  if (src.value) { \xe2\x9c\x85\n    loadImage(src.value)\n  }\n})\n

   \n
\n

\n

演示

\n