当前位置：首页 > VUE

vue实现联动get

2026-01-17 17:55:22VUE

Vue 实现联动获取数据的方法

在 Vue 中实现联动获取数据通常涉及父子组件通信、状态管理或 API 调用。以下是几种常见实现方式：

使用 `v-model` 和 `watch`

通过 v-model 绑定父组件数据，子组件使用 watch 监听变化并触发请求：

<!-- 父组件 -->
<template>
  <ChildComponent v-model="selectedOption" />
</template>

<script>
export default {
  data() {
    return {
      selectedOption: ''
    }
  }
}
</script>

<!-- 子组件 -->
<script>
export default {
  props: ['value'],
  watch: {
    value(newVal) {
      if (newVal) {
        this.fetchData(newVal)
      }
    }
  },
  methods: {
    fetchData(param) {
      axios.get(`/api/data?param=${param}`)
        .then(response => {
          // 处理响应数据
        })
    }
  }
}
</script>

使用事件触发

子组件通过 $emit 触发父组件方法：

<!-- 父组件 -->
<template>
  <ChildComponent @option-changed="handleOptionChange" />
</template>

<script>
export default {
  methods: {
    handleOptionChange(option) {
      axios.get(`/api/data?option=${option}`)
        .then(response => {
          // 更新数据
        })
    }
  }
}
</script>

<!-- 子组件 -->
<script>
export default {
  methods: {
    changeOption(option) {
      this.$emit('option-changed', option)
    }
  }
}
</script>

使用 Vuex 状态管理

当应用复杂时，可通过 Vuex 集中管理状态：

// store.js
actions: {
  async fetchData({ commit }, payload) {
    const response = await axios.get(`/api/data?id=${payload.id}`)
    commit('SET_DATA', response.data)
  }
}

// 组件中
methods: {
  fetchLinkedData() {
    this.$store.dispatch('fetchData', { id: this.selectedId })
  }
}

使用组合式 API (Vue 3)

在 Vue 3 中可以使用 setup 和 watch：

import { ref, watch } from 'vue'

export default {
  setup() {
    const selectedOption = ref('')

    watch(selectedOption, (newVal) => {
      if (newVal) {
        axios.get(`/api/data?option=${newVal}`)
          .then(response => {
            // 处理数据
          })
      }
    })

    return { selectedOption }
  }
}

使用计算属性

当依赖项变化时自动触发：

computed: {
  apiUrl() {
    return `/api/data?id=${this.selectedId}`
  }
},
watch: {
  apiUrl(newUrl) {
    axios.get(newUrl).then(response => {
      // 处理响应
    })
  }
}