将props/属性传递给自定义组件中的嵌套组件

Question

我想知道将许多道具传递给封装在外部组件中的组件的最佳方式是什么，例如

代码

<template>
<div>
<v-text-field
:error="summonerNameError"
:loading="summonerNameLoading"
@input="onSummonerNameChange($event)"
label="Nom Invocateur"
v-model="summonerName"
:solo="inputSolo"
:flat="inputFlat"
></v-text-field>
</div>
</template>

这里，如果我想从外部将多个属性传递给v-text-field，我应该在component上创建一个prop并将其传递给嵌套的v-text-field吗，或者有更好的方法吗？

Answer 1

这也是我的一个问题，我在Chris Fritz的这段非常有趣的视频中找到了解决方案：

他称之为透明包装：

因此，有两件事需要处理，监听器和属性：

对于听众：

<v-text-field v-on="$listeners"></v-text-field>

对于属性，这只是有点棘手。默认情况下，Vue会将所有属性传递给组件的根标记。在这里，根标记是一个div，但您希望将属性传递给v-text-field组件。您需要在Vue组件中使用inheritsAttrs: false：

export default {
inheritsAttrs: false
...
}

然后在v-text-field组件上使用相同的技术，方法是：

<v-text-field v-bind="$attrs"></v-text-field>

然后你应该有类似的东西

<v-text-field v-on="$listeners" v-bind="$attrs"></v-text-field>

然后你应该可以添加任何你喜欢的内容。希望这能有所帮助！

PS：视频从21:48 开始谈论这个技巧

希望这能有所帮助！