使用 和 对象作为 props 将多个属性绑定到组件 - Vue 3

Question

我在使用对象将多个属性绑定到组件时遇到了一些问题。当我在任何其他页面上使用此组件时，我希望传递匹配

ContentOptions

接口的道具，并使用

v-bind

让组件继承它们。 我希望我可以一次将所有道具分配给组件，而不是一一分配。它没有错误，没有警告，没有日志。只是不将传入的属性应用于组件。

组件设置如：

<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

使用组件如下：

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

参考 Vue 文档这里

Answer 1

你真的很接近，你正在分配给一个方法，而不是一个属性对象。 你可以从此改变

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

, }); 到

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

或者......我不完全确定，未经测试，您可以添加括号，例如：

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