当前位置：首页 > VUE

vue实现发送值接受值

2026-03-06 20:08:07VUE

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>