Vue中如何将所有props动态传递给孙组件

要实现无需手动指定参数，自动将Parent传入的grandchildParams所有属性作为props传递给Grandchild组件，直接用Vue的v-bind指令即可完成，步骤如下：

1. Child组件接收props
   先在Child组件中定义好接收Parent传来的grandchildParams：

   // Child.vue
   export default {
     props: {
       grandchildParams: {
         type: Object,
         required: true,
         default: () => ({})
       }
     }
   }
   

2. 模板中动态绑定props
   在Child的模板里，给Grandchild组件使用v-bind绑定整个grandchildParams对象：

   <template>
     <p>some extra stuff</p>
     <Grandchild v-bind="grandchildParams" />
   </template>
   

效果说明 #

当grandchildParams为{ label: 'foo', value: 'bar' }时，Vue会自动将对象中的每个键值对转换为对应的props绑定，等效于手动编写：

<Grandchild :label="grandchildParams.label" :value="grandchildParams.value" />

后续新增任何参数到grandchildParams中，都无需修改Child组件的代码，会自动传递给Grandchild组件。

注意事项 #

• Grandchild组件需提前定义好对应的props（Vue3中支持未定义的props，但从代码规范角度建议显式定义）；
• 如果grandchildParams中包含非Grandchild组件props的属性，Vue会自动过滤这些属性，不会传递给Grandchild。

内容的提问来源于stack exchange，提问作者Eduardo Sousa