时间戳

首页 > 解决方案 > 将道具/属性传递给自定义组件内的嵌套组件

vue.js - 将道具/属性传递给自定义组件内的嵌套组件

问题描述

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

代码

<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并将其传递给嵌套v-text-field，还是有更好的方法？

标签： vue.jsvuetify.js

解决方案

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

他称之为透明包装：

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

对于听众：

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

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

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开始讲这个技巧

希望这可以帮助！

推荐阅读