我使用不同的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>

这里有可能避免所有插槽枚举吗?

推荐答案

如果将slot属性放在html元素上,则该html元素将被传递给子组件,以使用该名称填充插槽.如果不想传递html元素,可以在组件中的template标记上使用slot.模板标记对元素进行分组,但不会呈现为html元素,这在这里很完美.您还可以将模板标记用于其他用途,例如将v-if中的元素分组,或使用v-for重复多个元素.

// App.vue
<template>
  <div id="app">
    <test>
      <template slot="activator">
        Click <b>me</b>!
      </template>
    </test>
  </div>
</template>
// Test.vue
<template>
  <div class="wrapper">
    <grand-child>
      <template slot="activator">
        <slot name="activator"></slot>
      </template>
    </grand-child>

    This is some text
  </div>
</template>
// GrandChild.vue
<template>
  <div>
    <a href="#" @click="toggle = !toggle">
      <slot name="activator">Default</slot>
    </a>

    <div v-if="toggle">This appears and disappears</div>
  </div>
</template>

Edit Vue Template

编辑:如果您想对任意插槽执行此操作,这也是可能的.this.$slots包含插槽及其内容,因此通过以下类似操作,您可以将插槽内容传递给同名插槽:

<grand-child>
  <template v-for="(_, slot) in $slots">
    <template :slot="slot">
      <slot :name="slot"></slot>
    </template>
  </template>
</grand-child>

Edit Vue Template

为完整起见,可通过$scopedSlots访问作用域插槽,并按如下方式传播:

<grand-child>
  <template v-for="(_, slot) in $scopedSlots" v-slot:[slot]="props">
    <slot :name="slot" v-bind="props" />
  </template>
</grand-child>

sourcecomment

Vue.js相关问答推荐

无法解析组件:google—pay—button

虚拟DOM在Vue中姗姗来迟

在 Nuxt3 中使用 Vue3 vue-ganntastic 插件

vuejs:将props传递给javascript中的组件?

指定一个 vue-cli vue.config.js 位置

如何在map中添加新的标记 onclick?

如何在 Vue.js 中添加动态组件/部分

Vuetify v-select 组件宽度变化

Vue.js 从模板中分离样式

错误:您可能需要额外的加载器来处理这些加载器的结果.

单击链接会更改 url,但不会更改页面上的内容/数据

在渲染组件之前从 api 获取数据

Keycloak:用户基于角色的客户端登录访问限制

vue js 中的 process.env.BASE_URL 是什么?

npm run dev 和 npm run production 的区别

Vue路由在新页面上回到顶部

Vue 2 转换不起作用

检测 Vue-Router 导航Guards中的后退按钮

Vuetify 离线文档

Vuetify v-data-table 固定标题不起作用