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

【问题标题】：passing props/attribute to nested component inside custom component将道具/属性传递给自定义组件内的嵌套组件
【发布时间】：2019-04-08 16:19:38
【问题描述】：

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

代码

<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，还是有更好的方法？

【问题讨论】：

您还可以使用vuex 更好地管理多个道具状态。

标签： vue.js vuetify.js

【解决方案1】：

这也是我的一个问题，我从 Chris Fritz 那里找到了this very interesting video 的解决方案：

他称之为透明包装：

所以有两件事要处理，监听器和属性：

对于听众：

<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@

希望这会有所帮助！

【讨论】：