How to pass all props dynamically to child component

Question

How to pass all props dynamically to child component? As an example consider a case:

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

third-party-component is a component which can accept number of attributes like value, disabled, clicked, etc. How I can use my-wrapper in way that whatever I passed as props to it it will be transferred to third-party-component like

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

Answer 1

By default the attributes you add on to my-wrapper will be bound to the root element which is div. To avoid this set inheritAttrs option to false

Then you can bind all the attributes to using v-bind="$attrs" where $attrs contains parent-scope attribute bindings (except for class and style)

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

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