vue实现数据交互

Vue 实现数据交互的方法

Vue 提供了多种方式实现数据交互，包括组件通信、状态管理、HTTP 请求等。以下是几种常见的方法：

父子组件通信

父组件通过 props 向子组件传递数据，子组件通过 $emit 触发事件通知父组件。

父组件代码：

<template>
  <ChildComponent :message="parentMessage" @update="handleUpdate" />
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  },
  methods: {
    handleUpdate(newMessage) {
      this.parentMessage = newMessage;
    }
  }
}
</script>

子组件代码：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="notifyParent">Update Parent</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    notifyParent() {
      this.$emit('update', 'New message from child');
    }
  }
}
</script>

兄弟组件通信

可以通过共同的父组件作为中介，或者使用事件总线（Event Bus）。

事件总线实现：

// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

// ComponentA
EventBus.$emit('event-name', data);

// ComponentB
EventBus.$on('event-name', data => {
  // handle data
});

Vuex 状态管理

对于大型应用，使用 Vuex 集中管理状态。

Vuex 示例：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  }
});

// 组件中使用
this.$store.commit('increment'); // 提交 mutation
this.$store.dispatch('increment'); // 分发 action

HTTP 请求

使用 axios 或其他 HTTP 客户端与后端交互。

axios 示例：

import axios from 'axios';

// GET 请求
axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

// POST 请求
axios.post('/api/data', { key: 'value' })
  .then(response => {
    console.log(response.data);
  });

Provide/Inject

跨层级组件通信，父组件通过 provide 提供数据，子孙组件通过 inject 注入。

父组件：

export default {
  provide() {
    return {
      sharedData: this.sharedData
    };
  },
  data() {
    return {
      sharedData: 'Some shared data'
    };
  }
}

子孙组件：

export default {
  inject: ['sharedData'],
  mounted() {
    console.log(this.sharedData);
  }
}

$refs 访问组件实例

通过 ref 属性直接访问子组件实例。

<template>
  <ChildComponent ref="child" />
</template>

<script>
export default {
  mounted() {
    this.$refs.child.childMethod();
  }
}
</script>

这些方法涵盖了 Vue 中大部分数据交互场景，根据具体需求选择合适的方式。