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）的this very interesting video找到了解决方法：

他称其为透明包装器：

因此要处理的两件事是侦听器和属性：

对于听众：

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

对于属性，它只是有点棘手。默认情况下，Vue将所有属性传递到组件的根标签。在这里，您的root标记是一个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讨论了这一技巧

希望这会有所帮助！

将道具/属性传递到自定义组件内的嵌套组件

1 个答案: