如何将所有道具动态传递给子组件

Question

如何将所有道具动态传递给子组件？例如，考虑一个案例：

// wrapper around a component my-wrapper.vue
<template>
  <div>
    <third-party-component />
  </div>
</template>

third-party-component是一个可以接受许多属性（例如值，禁用，单击等）的组件。如何使用my-wrapper将我作为道具传递的内容都转移到第三方组件中喜欢

<my-wrapper :value="myVal" :disabled="field.isDisabled" />

Answer 1

默认情况下，您添加到的属性my-wrapper将绑定到根元素div。为了避免将此设置inheritAttrs选项设置为false

然后，您可以将所有属性绑定为使用v-bind="$attrs"where $attrs包含父级属性绑定（class和除外style）

// wrapper around a component my-wrapper.vue
<template>
  <div>
    <third-party-component v-bind="$attrs"/>
  </div>
</template>

<script>
    export default{
        inheritAttrs: false
    }
</script>

Answer 2

我会为 wappers 设置相同的道具并在模板中使用它们......但是有很多方法，很容易从父母到孩子说话。

https://en.vuejs.org/v2/guide/components-props.html#Passing-Static-or-Dynamic-Props https://v1.vuejs.org/guide/syntax.html#Shorthands

---- MyWrapper.vue

<template>
  <div>
    <third-party-component :value="value" :disabled="disabled" />
  </div>
</template>
<script>
 @import third-party-component from '../..? ./components/thirdPartyComponent.vue'
 export default {
   name: 'MyWrapper',
   props: ['value', 'disabled'],
   components: {
     third-party-component // local component, you can use global
   } 
   //... data, computed ...
 }
</script>

----- MyAppli.vue

<template>
   <my-wrapper :value="myVal" :disabled="field.isDisabled" />
</template>
<script>
  import my-wrapper from '../..? ../components/MyWrapper.vue'
  export default {
   name: 'MyApp',
   components: {
     my-wrapper // local component, you can use global
   } ....