vue实现发送值接受值

Vue 实现父子组件传值

父组件向子组件传值（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 Message</button>
</template>

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

父组件代码示例：

<template>
  <ChildComponent @message-sent="handleMessage" />
  <div>{{ receivedMessage }}</div>
</template>

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

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

使用 Vuex 进行状态管理

对于跨组件或复杂状态管理，可以使用 Vuex 集中管理状态。

安装 Vuex

npm install vuex

创建 Store

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 }, message) {
      commit('setMessage', message);
    }
  }
});

组件中使用 Vuex

<template>
  <div>
    <button @click="updateMessage('New Message')">Update Message</button>
    <div>{{ sharedMessage }}</div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['sharedMessage'])
  },
  methods: {
    ...mapActions(['updateMessage'])
  }
};
</script>

使用 Event Bus 进行非父子组件通信

对于没有直接关系的组件，可以创建一个 Event Bus 来实现通信。

创建 Event Bus

// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();

发送事件

import { EventBus } from './event-bus.js';

EventBus.$emit('message-event', 'Hello from Component A');

接收事件

import { EventBus } from './event-bus.js';

EventBus.$on('message-event', message => {
  console.log(message);
});

使用 provide/inject 进行深层组件传值

对于深层嵌套的组件，可以使用 provide 和 inject 来传递数据。

祖先组件提供数据

<script>
export default {
  provide() {
    return {
      providedMessage: 'Message from Ancestor'
    };
  }
};
</script>

后代组件注入数据

<script>
export default {
  inject: ['providedMessage'],
  created() {
    console.log(this.providedMessage);
  }
};
</script>