Vue中如何用单个v-bind结合.prop modifier传递多Props？

你的问题出在把.prop修饰符写在了对象的属性名里，Vue无法识别这种写法。要通过单个v-bind传递包含对象/数组类型的Props给Web组件，正确的做法如下：

方法一：给v-bind整体添加.prop修饰符 #

直接在v-bind指令后加上.prop，这样所有绑定的属性都会以DOM property的形式传递给Web组件，既满足对象/数组类型Prop的传递要求，也能正常传递普通字符串类型的Prop：

const multipleProp = {
  myVal: { text: 'a', value: 'b' },
  someText: 'some text'
}

<template>
  <some-component v-bind.prop="multipleProp" />
</template>

这种方式适用于所有Props都需要以DOM property传递的场景，Web组件可以正确接收对象/数组类型的myVal，同时someText也能正常工作。

方法二：拆分属性（可选，适用于部分属性需要.prop的场景） #

如果只有部分属性需要.prop修饰符，可以拆分出两个对象，分别绑定：

const propWithDot = {
  myVal: { text: 'a', value: 'b' }
}
const normalProp = {
  someText: 'some text'
}

<template>
  <some-component v-bind.prop="propWithDot" v-bind="normalProp" />
</template>

但根据你的需求，优先推荐方法一，用单个v-bind完成所有Props的传递。

内容的提问来源于stack exchange，提问作者dongwoo Kwak