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'); // 分发 actionHTTP 请求
使用 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 中大部分数据交互场景，根据具体需求选择合适的方式。
