在< slots>Vue.js 2.6中访问Javascript中的内容

kgsdhlau 于 2023-03-13 发布在 Vue.js

关注(0)|答案(2)|浏览(123)

我创建了一个简单的Button组件，实现如下：

<Button @click="clickEvent">Download Item</Button>`

这是我的按钮的模板，我使用<slot>中的内容来呈现它的文本：

<div class="customButton">
    <slot></slot>
</div>

但是，我需要再次将插槽内容添加到屏幕阅读器的aria-label属性中：

<div class="customButton" role="button" :aria-label="howDoIaccessSlotContent">
    <slot></slot>
</div>

如何访问<slot>数据？Vue是否有一个特殊的this.$xxx属性，可以在JavaScript中访问插槽信息？

vue.js

来源：https://stackoverflow.com/questions/75678899/accessing-the-content-of-slots-in-javascript-in-vue-js-2-6

2条答案

按热度按时间

watbbzwu1#

您可以使用以下命令获取默认插槽的文本内容：

this.$slots.default[0].text

x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-03-13

y53ybaqx2#

您可以使用this.$slots访问插槽。
并且可以使用render函数控制插槽的渲染。

export default {
  name: 'MyButton',
  render(h) {
    const rawText = this.$slots.default[0].text;
    console.log(rawText);
    return h('div', {
      attrs: {
        'aria-label': rawText
      }
    }, this.$slots.default)
  }
}

https://v2.vuejs.org/v2/guide/render-function.html

赞(0）回复(0）举报 2023-03-13

我来回答

在< slots>Vue.js 2.6中访问Javascript中的内容

2条答案

相关问题

热门标签

最新问答