vue组件传值的五种方法

<!-- 1. Props -->
<!-- 父组件传递数据给子组件 -->
<template>
  <ChildComponent :message="parentMessage" />
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: 'Hello from Parent',
    };
  },
};
</script>

<!-- 子组件接收数据 -->
<script>
export default {
  props: ['message'],
  mounted() {
    console.log(this.message); // 输出：Hello from Parent
  },
};
</script>

<!-- 2. Events ($emit) -->
<!-- 子组件触发事件，父组件监听 -->
<!-- 子组件 -->
<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('custom-event', 'Message from Child');
    },
  },
};
</script>

<!-- 父组件 -->
<template>
  <ChildComponent @custom-event="handleCustomEvent" />
</template>

<script>
export default {
  methods: {
    handleCustomEvent(message) {
      console.log(message); // 输出：Message from Child
    },
  },
};
</script>

<!-- 3. Provide / Inject -->
<!-- 祖先组件提供数据，后代组件注入 -->
<!-- 祖先组件 -->
<script>
export default {
  provide() {
    return {
     祖先提供的数据: 'Provided Data',
    };
  },
};
</script>

<!-- 后代组件 -->
<script>
export default {
  inject: ['祖先提供的数据'],
  mounted() {
    console.log(this.祖先提供的数据); // 输出：Provided Data
  },
};
</script>

<!-- 4. Vuex (状态管理) -->
<!-- 使用Vuex进行全局状态管理 -->
<!-- store.js -->
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    },
  },
});

<!-- 组件中使用 -->
<script>
export default {
  methods: {
    incrementCount() {
      this.$store.dispatch('increment');
    },
  },
  computed: {
    count() {
      return this.$store.state.count;
    },
  },
};
</script>

<!-- 5. Event Bus (事件总线) -->
<!-- 使用事件总线进行组件间通信 -->
<!-- 创建事件总线 -->
<script>
import Vue from 'vue';
export const eventBus = new Vue();
</script>

<!-- 发送事件 -->
<script>
import { eventBus } from './eventBus';

export default {
  methods: {
    sendMessage() {
      eventBus.$emit('custom-event', 'Message from Component A');
    },
  },
};
</script>

<!-- 接收事件 -->
<script>
import { eventBus } from './eventBus';

export default {
  created() {
    eventBus.$on('custom-event', (message) => {
      console.log(message); // 输出：Message from Component A
    });
  },
};
</script>