Vue.js 如何在槽上使用属性

Question

是否可以在插槽上设置属性，并且父元素中的元素获取这些属性？

家长

<vDropdown>
  <button slot="button">new button</button>
  <ul>content</ul>
</vDropdown>

下拉菜单.vue

<div>
  <slot name="button" aria-haspopup="true">
    //fallback
    <button aria-haspopup="true">Default Button</button>
  </slot>
  <div id="name" :aria-expanded="expanded">
    <slot />
  </div>
</div>

按钮的输出没有任何属性......

<div>
  <button>new button</button>
  <div id="myDropdown" aria-expanded="false">
    <ul>content</ul>
  </div>
</div>

Answer 1

使用作用域插槽

\n

步骤 1.在父级中，将旧的已弃用的槽定位语法更新slot="button"为v-slot指令：

\n

_家长.vue

\n

...\n<template v-slot:button>                   \xe2\x9c\x85\n  <button>new button</button>\n</template>\n...\n

\n

<button slot="button">new button</button>  \xe2\x9d\x8c\n

\n

^{如何在 Vue 2.6.0+ 中定位插槽}

\n

步骤 2.接下来，了解您添加到<slot>标签的任何属性绑定将可供放置在那里的任何槽内容使用（这些称为“槽属性”）：

\n

_{下拉菜单.vue}

\n

<slot name="button" :aria-haspopup="true">\n

\n

步骤 3.Vue自动创建一个包含步骤 2 中的每个绑定的对象，并将其传递给表达式v-slot，即slotProps下面的表达式。然后，您可以使用特殊v-bind=""语法将所有这些绑定传播到按钮上：

\n

_{Parent.vue已更新}

\n

<template v-slot:button="slotProps">\n  <button v-bind="slotProps">new button</button>\n</template>\n

\n

这是一个演示，但遗憾的是，当您使用 kebab-case 属性执行此操作时，它需要使用两个连字符进行破解。我计划在 Vue GitHub 存储库中提交一个问题。

\n

\r\n

\r\n

Vue.component(\'dropdown\', {\n  template: `\n  <div>\n    <slot name="button" aria--haspopup="true">\n      <button aria-haspopup="true">Default Button</button>\n    </slot>\n    <div id="name" :aria-expanded="expanded">\n      <slot />\n    </div>\n  </div>`,\n  data() {\n    return {\n      expanded: true\n    }\n  }\n});\n\nnew Vue({\n  el: "#app",\n});

\r\n

.aria-haspopup {\n  background: orange;\n}

\r\n

<div id="app">\n  <dropdown>\n    <template v-slot:button="slotProps">\n      <button v-bind="slotProps">new button</button>\n    </template>\n    <ul>content</ul>\n  </dropdown>\n</div>\n\n<script src="https://unpkg.com/vue"></script>

\r\n

\r\n

\r\n

\n