当前位置：首页 > VUE

vue实现联动get

2026-02-18 10:23:19VUE

Vue 实现联动 GET 请求

在 Vue 中实现联动 GET 请求通常涉及父子组件通信、状态管理或直接调用 API。以下是几种常见方法：

使用 props 和事件监听

父组件通过 props 传递数据给子组件，子组件通过事件触发父组件的请求方法。

父组件代码示例：

<template>
  <ChildComponent :data="parentData" @update="fetchData" />
</template>

<script>
export default {
  data() {
    return {
      parentData: null
    }
  },
  methods: {
    async fetchData(params) {
      const response = await axios.get('/api/data', { params })
      this.parentData = response.data
    }
  }
}
</script>

子组件代码示例：

<template>
  <button @click="handleClick">更新数据</button>
</template>

<script>
export default {
  props: ['data'],
  methods: {
    handleClick() {
      this.$emit('update', { id: 123 })
    }
  }
}
</script>

使用 Vuex 状态管理

当组件层级较深时，Vuex 可以更高效地管理共享状态和异步请求。

store 模块示例：

const actions = {
  async fetchData({ commit }, params) {
    const response = await axios.get('/api/data', { params })
    commit('SET_DATA', response.data)
  }
}

组件中调用：

methods: {
  updateData() {
    this.$store.dispatch('fetchData', { id: this.selectedId })
  }
}

使用组合式 API (Vue 3)

Vue 3 的组合式 API 提供了更灵活的代码组织方式。

示例代码：

import { ref } from 'vue'
import axios from 'axios'

export function useDataFetcher() {
  const data = ref(null)
  const error = ref(null)

  const fetchData = async (params) => {
    try {
      const response = await axios.get('/api/data', { params })
      data.value = response.data
    } catch (err) {
      error.value = err
    }
  }

  return { data, error, fetchData }
}

在组件中使用：

import { useDataFetcher } from './composables/useDataFetcher'

export default {
  setup() {
    const { data, fetchData } = useDataFetcher()

    return {
      data,
      handleUpdate: (params) => fetchData(params)
    }
  }
}

使用 watch 监听变化

当需要根据某些值的变化自动触发请求时，可以使用 watch。

示例代码：

watch: {
  selectedId(newVal) {
    this.fetchData({ id: newVal })
  }
}

使用 computed 属性

对于需要基于其他数据计算的请求参数，可以使用 computed 属性。

示例代码：

vue实现联动get

computed: {
  requestParams() {
    return {
      page: this.currentPage,
      size: this.pageSize
    }
  }
},
watch: {
  requestParams: {
    handler(newVal) {
      this.fetchData(newVal)
    },
    immediate: true
  }
}