如何在Vue中向多个子组件传递共享Props？

在Vue里，你可以用**无参数的v-bind**来实现和React中{...shared_props}完全等价的效果——把对象的每个键值对作为独立的props传递给子组件，而不是把整个对象作为单个prop传入。

具体实现步骤 #

1. 声明共享的props对象

   • Vue 2选项式API：

     <script>
     export default {
       data() {
         return {
           sharedProps: {
             prop1: 'value1',
             prop2: 'value2',
             prop3: 'value3'
           }
         }
       }
     }
     </script>
     

   • Vue 3组合式API：

     <script setup>
     const sharedProps = {
       prop1: 'value1',
       prop2: 'value2',
       prop3: 'value3'
     }
     </script>
     

2. 在模板中传递给子组件
   直接使用v-bind="sharedProps"，就会自动把对象里的每个属性拆解成单独的props传递给子组件：

   <template>
     <ChildComponent1 v-bind="sharedProps" />
     <ChildComponent2 v-bind="sharedProps" />
     <ChildComponent3 v-bind="sharedProps" />
   </template>
   

和你提到的错误写法的区别 #

你说的v-bind:shared_props="shared_props"是把整个shared_props对象作为一个名为shared_props的单个prop传给子组件，子组件需要声明一个shared_props的prop来接收；而v-bind="sharedProps"是把对象里的prop1、prop2、prop3分别作为独立的props传递，子组件需要单独声明这些prop来接收，这和React的{...shared_props}行为完全一致。

额外补充：混合自定义props #

如果需要在共享props的基础上添加额外的自定义prop，直接在组件上追加即可，逻辑和React一致：

<template>
  <ChildComponent1 v-bind="sharedProps" extraProp="customValue" />
</template>

内容的提问来源于stack exchange，提问作者Joe Bin