Vue.js 组件传值方式详解：Props、Vuex、Event Bus 等

在 Vue.js 中，组件之间的传值方式有多种，具体选择哪种方式取决于组件的层级关系和业务需求。以下是常见的几种传值方式：

1. Props 和 Events

• Props：父组件通过 props 向子组件传递数据。
• Events：子组件通过 $emit 触发事件，父组件监听这些事件并处理数据。

<!-- ParentComponent.vue -->
<template>
  <ChildComponent :message="parentMessage" @update="handleUpdate" />
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from Parent'
    };
  },
  methods: {
    handleUpdate(newMessage) {
      this.parentMessage = newMessage;
    }
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    updateMessage() {
      this.$emit('update', 'New Message from Child');
    }
  }
};
</script>

2. Provide / Inject

• Provide：祖先组件通过 provide 提供数据。
• Inject：后代组件通过 inject 注入数据。

<!-- AncestorComponent.vue -->
<template>
  <div>
    <DescendantComponent />
  </div>
</template>

<script>
export default {
  provide() {
    return {
      sharedData: 'Shared Data from Ancestor'
    };
  }
};
</script>

<!-- DescendantComponent.vue -->
<template>
  <div>
    <p>{{ sharedData }}</p>
  </div>
</template>

<script>
export default {
  inject: ['sharedData']
};
</script>

3. Vuex（状态管理）

• Vuex：用于管理全局状态，适合跨组件共享数据。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: 'Hello from Vuex'
  },
  mutations: {
    updateMessage(state, newMessage) {
      state.message = newMessage;
    }
  },
  actions: {
    updateMessage({ commit }, newMessage) {
      commit('updateMessage', newMessage);
    }
  }
});

// ComponentA.vue
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  computed: {
    message() {
      return this.$store.state.message;
    }
  },
  methods: {
    updateMessage() {
      this.$store.dispatch('updateMessage', 'New Message from ComponentA');
    }
  }
};
</script>

// ComponentB.vue
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

4. Event Bus

• Event Bus：通过一个全局的事件总线来传递数据，适合非父子组件之间的通信。

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

// ComponentA.vue
<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

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

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

// ComponentB.vue
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

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

5. $refs

• $refs：通过 ref 属性直接访问子组件的实例或 DOM 元素。

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent ref="child" />
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>

<script>
export default {
  methods: {
    callChildMethod() {
      this.$refs.child.childMethod();
    }
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>Child Component</p>
  </div>
</template>

<script>
export default {
  methods: {
    childMethod() {
      console.log('Method called in Child Component');
    }
  }
};
</script>

6. $attrs 和 $listeners

• $attrs：包含父组件传递给子组件的所有非 props 属性。
• $listeners：包含父组件传递给子组件的所有事件监听器。

<!-- ParentComponent.vue -->
<template>
  <ChildComponent custom-attr="value" @custom-event="handleEvent" />
</template>

<script>
export default {
  methods: {
    handleEvent() {
      console.log('Custom event triggered');
    }
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div v-bind="$attrs" v-on="$listeners">
    <p>Child Component</p>
  </div>
</template>

7. v-model 和 .sync

• v-model：用于双向绑定，通常用于表单输入。
• .sync：用于简化父子组件之间的双向绑定。

<!-- ParentComponent.vue -->
<template>
  <ChildComponent v-model="message" />
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from Parent'
    };
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <input :value="value" @input="$emit('input', $event.target.value)" />
  </div>
</template>

<script>
export default {
  props: ['value']
};
</script>

8. Scoped Slots

• Scoped Slots：允许父组件向子组件传递模板内容，子组件可以决定如何渲染这些内容。

<!-- ParentComponent.vue -->
<template>
  <ChildComponent v-slot="{ data }">
    <p>{{ data }}</p>
  </ChildComponent>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from Parent'
    };
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot :data="message"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from Child'
    };
  }
};
</script>

总结

• Props 和 Events 是最常用的父子组件通信方式。
• Provide / Inject 适合跨层级组件通信。
• Vuex 适合全局状态管理。
• Event Bus 适合非父子组件之间的通信。
• $refs 适合直接访问子组件实例或 DOM 元素。
• $attrs 和 $listeners 适合传递非 props 属性和事件监听器。
• v-model 和 .sync 适合双向绑定。
• Scoped Slots 适合灵活的内容分发。

根据具体场景选择合适的传值方式，可以提高代码的可维护性和可读性。