我使用不同的vuetify组件,例如v-menu.它有这样一个模板:
<v-menu>
<a slot="activator">menu</a>
<v-list>
<v-list-tile>Menu Entry 1</v-list-tile>
<v-list-tile>Menu Entry 2</v-list-tile>
</v-list>
</v-menu>
假设我想在它周围再加一个包装.这是我的特殊菜单组件,它有一些预定义的菜单选项.我希望它也有一个激活器插槽.最后一个应该以某种方式分配给原始的v-menu activator插槽.可能吗?
例子:
// index.vue:
<template>
<my-special-menu>
<button>My special menu trigger</button>
</my-special-menu>
</template>
// MySpecialMenu.vue
<template>
<v-menu>
<slot slot="activator"/> <-- I don't know how to write this line
<v-list>...</v-list>
</v-menu>
</template>
<slot slot="activator">
是一个错误的等式.我们的目标是从父级(本例中为<button>..</button>
)中提取内容,并将其用作v-menu中的slot="activator"
.
我可以这样写:
<v-menu>
<a slot="activator"><slot/></a>
...
</v-menu>
但在这种情况下,结果模板将是:
<div class="v-menu__activator">
<a>
<button>My special menu trigger</button>
</a>
</div>
这不是我想要的.这里有没有可能go 掉<a>
个包装纸?
更新:
例如,vuetify中有<v-autocomplete>
个组件有append、prepend、label、no data、progress、item、selection等插槽.我围绕这一点编写了一些包装器组件,它目前看起来像:
<template>
<v-autocomplete ..>
<template slot="append"><slot name="append"/></template>
<template slot="prepend"><slot name="prepend"/></template>
<template slot="label"><slot name="label"/></template>
...
<template slot="item" slot-scope="props"><slot name="item" v-bind="props"/></template>
</v-autocomplete>
</template>
这里有可能避免所有插槽枚举吗?