Binding multiple properties to a component using and object as props - Vue 3

Question

I'm having a little problem binding multiple properties to a component using an object. When I use this component on any other page I expect to pass the props in matching the ContentOptions interface and have them inherited by the component using v-bind. I'm hoping I can assign all the props to the component at once instead of one-by-one. It doesn't error, no warnings, no logs. Just doesn't apply the passed in properties to the component.

Component Setup Like:

<script setup lang="ts">
export interface ContentOptions {
    align?: 'start' | 'center' | 'end';
    ...more options
}

interface Props {
    contentOptions?: ContentOptions;
    ...other options
}

const props = withDefaults(defineProps<Props>(), {
  contentOptions: () => ({
    align: 'end',
    ... other options
  }),
});
</script>

<template>
  <OtherComponents>
    <PassPropsToThisComponent v-bind="props.contentOptions">
      <!-- stuff -->
    </PassPropsToThisComponent>
  </OtherComponents>
</template>

Using Component Like:

<PassPropsToThisComponent :contentOptions="{ align: 'start', ...more options } />

Referencing the Vue documentation here

Update

Turns out that passings props in overrides default values. For example if I use the following:

<PassPropsToThisComponent :contentOptions="{ align: 'start' } />

the only props available are align ... deleting any of the default values that were defined.

Answer 1

You're really close, you're assigning to a method, rather than an object of properties. You could change from this

const props = withDefaults(defineProps<Props>(), {
  contentOptions: () => ({
    align: 'end',
    ... other options
  })

, }); to

const props = withDefaults(defineProps<Props>(), {
  contentOptions: {
    align: 'end',
    ... other options
  },
});

or ... and I'm not totally sure, without testing you could append parenthesis like:

<PassPropsToThisComponent v-bind="props.contentOptions()">