当前位置：首页 > VUE

如何实现传值vue

2026-01-22 00:46:16VUE

父组件向子组件传值（Props）

在父组件中通过v-bind（或简写为:）将数据传递给子组件。子组件通过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触发自定义事件，父组件通过v-on（或简写为@）监听事件并接收数据。

子组件代码：

<template>
  <button @click="sendMessage">Send to Parent</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-from-child', 'Hello from Child')
    }
  }
}
</script>

父组件代码：

<template>
  <ChildComponent @message-from-child="handleChildMessage" />
  <p>Received: {{ childMessage }}</p>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  data() {
    return {
      childMessage: ''
    }
  },
  methods: {
    handleChildMessage(msg) {
      this.childMessage = msg
    }
  }
}
</script>

兄弟组件间传值（Event Bus）

创建一个中央事件总线，通过事件触发和监听实现组件间通信。

创建eventBus.js：

import Vue from 'vue'
export const EventBus = new Vue()

发送方组件：

<template>
  <button @click="sendMessage">Send to Sibling</button>
</template>

<script>
import { EventBus } from './eventBus.js'

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message-event', 'Hello from Sibling')
    }
  }
}
</script>

接收方组件：

<template>
  <div>Received: {{ message }}</div>
</template>

<script>
import { EventBus } from './eventBus.js'

export default {
  data() {
    return {
      message: ''
    }
  },
  created() {
    EventBus.$on('message-event', msg => {
      this.message = msg
    })
  }
}
</script>

Vuex状态管理（跨组件共享数据）

安装Vuex后创建store实例，通过commit触发mutations或dispatch触发actions来修改状态。

store/index.js：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    sharedMessage: ''
  },
  mutations: {
    setMessage(state, payload) {
      state.sharedMessage = payload
    }
  },
  actions: {
    updateMessage({ commit }, payload) {
      commit('setMessage', payload)
    }
  }
})

组件中修改状态：

<template>
  <button @click="updateStoreMessage">Update Store</button>
</template>

<script>
export default {
  methods: {
    updateStoreMessage() {
      this.$store.dispatch('updateMessage', 'New shared value')
    }
  }
}
</script>

组件中读取状态：

<template>
  <div>{{ sharedMessage }}</div>
</template>

<script>
export default {
  computed: {
    sharedMessage() {
      return this.$store.state.sharedMessage
    }
  }
}
</script>

使用provide/inject（跨层级组件传值）

祖先组件通过provide提供数据，后代组件通过inject注入数据。

祖先组件：

<template>
  <ChildComponent />
</template>

<script>
export default {
  provide() {
    return {
      providedMessage: 'Provided value'
    }
  }
}
</script>

后代组件：

<template>
  <div>{{ injectedMessage }}</div>
</template>

<script>
export default {
  inject: ['providedMessage'],
  computed: {
    injectedMessage() {
      return this.providedMessage
    }
  }
}
</script>

如何实现传值vue