Question

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

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

third-party-component是一个可以接受许多属性的组件，例如value，disabled，clicked等。我如何使用my-wrapper，无论我作为道具传递的内容如何都将被传递给第三方，派对组件，如

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

Answer 1

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

然后，您可以使用v-bind="$attrs"绑定所有属性，其中$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

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

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
   } ....

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

2 个答案: