Subscribe on changes!

There exist no 'inheritAttrs' option with functional component

avatar
Sep 3rd 2021

What problem does this feature solve?

When i wanna using a function component to delegate target component, and render of functional component need merging prop、context.attrs and custom props etc.

<functional-component label="foo" />

The functional-component code below:

(props, context) => {
        return h('other-component', mergeProps(props, context.attrs, { label: 'bar' }))
}

Unexpected render that label of other-component props is 'foo'. I hoping that i can rewriting the 'label' prop.

What does the proposed API look like?

{
 inheritAttrs: false,
 (props, context) => {
        return h('other-component', mergeProps(props, context.attrs, { label: 'bar' }))
 }
}
avatar
Sep 3rd 2021

We can using SFC to implement that.

<template>
  <component
    v-bind:is="`h${$props.level}`"
    v-bind="$attrs"
  />
</template>

<script>
export default {
  inheritAttrs: false, // HIGHTLINE
  props: ['level']
}
</script>