Vue3与Axios使用报错求助：组件语法错误排查

核心错误与修正步骤 #

• 子组件语法错误（编译报错根源）：子组件里export default({ ... })多了一对括号，正确写法是export default { ... }，这是导致编译提示Expected ";" but found ")"的直接原因。
• 子组件self指向错误：顶级作用域里的let self = this;根本拿不到组件实例，this此时为undefined。直接在methods里用this.hostname即可，Vue组件methods中的this会自动绑定组件实例。
• 父组件组件导入与注册不匹配：父组件导入时写的import CustomerWaiting from "./components/Incoming.vue";，但components里注册的是Incoming，两者名称必须统一。
• 父组件异步请求的console.log时机错误：console.log(this.hostname)放在axios请求外部会先输出空字符串，因为axios是异步操作，需将log放到then回调内才能拿到正确IP。

修正后的完整代码 #

父组件（App.vue） #

<template>
  <div id="app">
    <Incoming :hostname="hostname" />
  </div>
</template>

<script lang="ts">
import axios from 'axios'
import Incoming from "./components/Incoming.vue"; // 统一组件名称
export default {
  name: "app",
  components: {
    Incoming,
  },
  data() {
    return {
      hostname: ''
    }
  },
  mounted() {
    axios.get('https://api.ipify.org?format=json')
    .then((response) => {
      this.hostname = response.data.ip
      console.log(this.hostname); // 移到回调内，获取正确IP
    })
  }
};
</script>

子组件（Incoming.vue） #

<template>
    <button @click="hello">HELLO</button>
    <button @click="timePlease">TIME PLEASE</button>
    <button @click="outtaHere">I AM OUTTA HERE</button>
</template>

<script lang="ts">
import axios from 'axios';
// 移除错误的let self = this;
export default { // 去掉多余的括号
    name: 'waiting',
    props: ['hostname'],
    methods: {
        hello() {
            axios({
                url: `http://${this.hostname}:8989/?action=doSomething&additional=true`,
                headers: {
                    accesstoken: 'myAccessToken'
                }
            })
        },
        timePlease() {
            axios({
                url: `http://${this.hostname}:8989/?action=doSomething&additional=true&anothere=true`,
                headers: {
                    accesstoken: 'myAccessToken'
                }
            })
        },
        outtaHere() {
            axios({
                url: `http://${this.hostname}:8989/?action=doNothing`,
                headers: {
                    accesstoken: 'myAccessToken'
                }
            })
        }
    }
}
</script>

额外优化建议 #

• 给子组件的hostnameprop添加类型校验，避免传值错误：

  props: {
    hostname: {
      type: String,
      required: true
    }
  }
  

• 给axios请求添加错误捕获，方便排查接口问题：

  hello() {
    axios({
      url: `http://${this.hostname}:8989/?action=doSomething&additional=true`,
      headers: {
        accesstoken: 'myAccessToken'
      }
    }).catch(err => {
      console.error('请求失败:', err)
    })
  }
  

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