Vue组件中prop报错：'imgurl'未定义的原因及解决咨询

你遇到的'imgurl' is not defined错误，核心原因是fetch代码写在了组件实例的上下文之外，根本无法访问到props里的imgurl。同时你的Vue3代码写法也存在不符合规范的地方，以下是具体问题说明和修正方案：

核心问题 #

1. 代码执行位置错误：你把fetch(imgurl)写在了export default的外部，这部分代码会在组件模块加载时直接执行，此时组件实例还未创建，props还未注入，自然找不到imgurl变量。必须把数据请求逻辑放在组件的生命周期钩子或组合式API的setup函数中，确保能访问到组件的props。
2. Vue3语法不规范：顶层定义的ref()无法和组件实例绑定，更新后不会触发视图渲染；选项式API中访问props需要通过this调用。

修正方案 #

方案1：选项式API写法 #

<template>
  <h2>{{ name }}</h2>
  <img :src="imgLink" />
</template>

<script>
export default {
  props: {
    name: String,
    imgurl: String
  },
  data() {
    return {
      imgLink: ''
    }
  },
  mounted() {
    // 组件挂载后通过this访问props
    fetch(this.imgurl)
      .then(res => res.json())
      .then(json => {
        this.imgLink = json.sprites.front_default
      })
      .catch(err => console.error('请求失败:', err)) // 建议添加错误捕获
  }
}
</script>

方案2：Vue3组合式API（setup语法糖，推荐） #

<template>
  <h2>{{ name }}</h2>
  <img :src="imgLink" />
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 接收props，defineProps是setup语法糖内置宏
const props = defineProps({
  name: String,
  imgurl: String
})

const imgLink = ref('')

onMounted(() => {
  // 通过props.imgurl访问传入的属性
  fetch(props.imgurl)
    .then(res => res.json())
    .then(json => {
      imgLink.value = json.sprites.front_default
    })
    .catch(err => console.error('请求失败:', err))
})
</script>

额外优化提示 #

如果imgurl存在动态变化的可能，可以通过watch监听props变化并重新发起请求：

// 组合式API中添加监听逻辑
import { watch } from 'vue'

watch(() => props.imgurl, (newUrl) => {
  if (newUrl) {
    fetch(newUrl)
      .then(res => res.json())
      .then(json => imgLink.value = json.sprites.front_default)
      .catch(err => console.error('请求失败:', err))
  }
}, { immediate: true }) // immediate: true 表示组件初始化时就执行一次

内容的提问来源于stack exchange，提问作者Tage Danielsson