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(message) {
      console.log(message) // 输出：Hello from child
    }
  }
}
</script>

兄弟组件间传值（Event Bus）

创建一个中央事件总线，用于兄弟组件间的通信。

创建 Event Bus（event-bus.js）：

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

发送消息的组件：

<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
import { EventBus } from './event-bus'

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

接收消息的组件：

<script>
import { EventBus } from './event-bus'

export default {
  created() {
    EventBus.$on('message-sent', message => {
      console.log(message) // 输出：Hello from sibling
    })
  },
  beforeDestroy() {
    EventBus.$off('message-sent')
  }
}
</script>

Vuex 状态管理

对于复杂应用，可以使用 Vuex 进行全局状态管理。

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 }, message) {
      commit('setMessage', message)
    }
  },
  getters: {
    getMessage: state => state.message
  }
})

组件发送数据：

<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

适用于深层嵌套组件间的传值。

祖先组件：

<script>
export default {
  provide() {
    return {
      sharedMessage: 'Hello from ancestor'
    }
  }
}
</script>

后代组件：

<script>
export default {
  inject: ['sharedMessage'],
  created() {
    console.log(this.sharedMessage) // 输出：Hello from ancestor
  }
}
</script>