我已经创建了一个简单的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中的插槽信息？
您可以使用以下命令获取默认槽的文本内容:
this.$slots.default[0].text
const SlotComponent = {
template: `
<div> Value inside:
{{ $slots.default[0].text }} -
{{ $slots.default[0].text }}
</div>
`,
}
new Vue({
el: '#app',
components: {SlotComponent},
data: {
val: 'foo'
}
})<div id="app">
Value outside: {{val}}
<slot-component>{{val}}</slot-component>
<button @click="val = (val === 'foo') ? 'bar' : 'foo'">toggle</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.10/vue.min.js"></script>
<script src="https://unpkg.com/v-calendar"></script>