vue实现发送值接受值
Vue 实现组件间传值
Vue 中组件间传值可以通过多种方式实现，以下是常见的方法：
父组件向子组件传值（Props）
父组件通过 props 向子组件传递数据。
父组件代码：
<template>
<ChildComponent :message="parentMessage" />
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: 'Hello from parent'
}
}
}
</script>子组件代码：
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: {
message: {
type: String,
required: true
}
}
}
</script>子组件向父组件传值（自定义事件）
子组件通过 $emit 触发自定义事件，父组件监听该事件并接收数据。
子组件代码：
<template>
<button @click="sendMessage">Send Message</button>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$emit('message-sent', 'Hello from child')
}
}
}
</script>父组件代码：
<template>
<ChildComponent @message-sent="handleMessage" />
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
methods: {
handleMessage(msg) {
console.log(msg) // 输出: Hello from child
}
}
}
</script>兄弟组件间传值（事件总线）
使用一个空的 Vue 实例作为事件总线，实现兄弟组件间的通信。
创建事件总线：
// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()发送组件代码：
<template>
<button @click="sendMessage">Send Message</button>
</template>
<script>
import { EventBus } from './eventBus.js'
export default {
methods: {
sendMessage() {
EventBus.$emit('message-sent', 'Hello from sibling')
}
}
}
</script>接收组件代码：
<template>
<div>{{ message }}</div>
</template>
<script>
import { EventBus } from './eventBus.js'
export default {
data() {
return {
message: ''
}
},
created() {
EventBus.$on('message-sent', msg => {
this.message = msg
})
}
}
</script>Vuex 状态管理
对于复杂应用，可以使用 Vuex 进行全局状态管理。
安装 Vuex：
npm install vuex创建 store：
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
message: ''
},
mutations: {
setMessage(state, payload) {
state.message = payload
}
},
actions: {
updateMessage({ commit }, msg) {
commit('setMessage', msg)
}
},
getters: {
getMessage: state => state.message
}
})发送组件代码：
<template>
<button @click="sendMessage">Send Message</button>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$store.dispatch('updateMessage', 'Hello from Vuex')
}
}
}
</script>接收组件代码：
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
computed: {
message() {
return this.$store.getters.getMessage
}
}
}
</script>provide/inject
适用于祖先组件向后代组件传值，主要用于高阶插件/组件库。
祖先组件代码：
<template>
<ChildComponent />
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
provide() {
return {
providedMessage: 'Hello from ancestor'
}
}
}
</script>后代组件代码：
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
inject: ['providedMessage'],
data() {
return {
message: this.providedMessage
}
}
}
</script>总结
Vue 组件间通信有多种方式，根据不同的场景选择合适的方法：
- 父子组件间传值使用
props和$emit - 兄弟组件间传值使用事件总线
- 复杂应用使用 Vuex 进行状态管理
- 深层嵌套组件使用
provide/inject
