Vue中如何在函数间共享变量，将用户输入传递给API调用方法？

问题解答 #

你的思路完全符合Vue的设计规范，完全可以将两部分逻辑整合到同一个单文件组件的export default内，不需要拆分实现。Vue的组件设计本身就支持将视图绑定、状态存储、业务逻辑（包括接口调用）统一维护在同一个组件实例中。

具体实现逻辑 #

1. 合并响应式状态：将两段代码中的响应式变量message和weatherList统一放在同一个data配置项的返回值中，整个组件实例内都可以通过this.xxx直接访问这些变量，不需要额外做函数间的参数传递。
2. 直接复用输入值：通过v-model绑定的message是实时响应的，你可以在接口请求方法里直接读取this.message拿到用户最新的输入内容，拼接进接口地址即可。

完整规范示例代码 #

<template>
  <div id="v-model-basic" class="demo">
    <input v-model="message" placeholder="请输入要查询的城市名" />
    <p>当前查询的城市是：{{ message }}</p>
    <button @click="getWeatherData">查询天气</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: "Weather",
  data() {
    return {
      // 合并两个响应式状态
      message: '',
      weatherList: []
    };
  },
  methods: {
    // 方法命名遵循小驼峰规范
    getWeatherData() {
      // 简单非空校验，避免无意义的接口请求
      if (!this.message.trim()) return
      // 将用户输入拼接到接口地址，示例为查询参数形式
      axios.get(`https://anAPIpath.com/that-I-want-to-add-user-input-to?city=${this.message}`)
        .then(response => (this.weatherList = response.data))
        .catch(err => {
          // 可自行补充错误提示逻辑
          console.error('天气查询失败:', err)
        })
    }
  }
};
</script>

符合Vue规范的优化建议 #

• 变量、方法命名统一使用小驼峰格式，提升代码可读性
• 如果需要用户输入时自动触发查询，可以新增watch配置监听message的变化，自动调用getWeatherData，无需手动点击按钮
• 接口请求的公共域名可以抽离到项目全局配置文件中，避免每个组件重复编写完整地址
• 可额外添加接口请求的loading状态，优化用户体验

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