Accessing the content of <slots> in Javascript in Vue.js 2.6

Question

I've created a simple Button component that I implement as follows:

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

This is the template of my button. I use the content in <slot> to render its text:

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

However, I need to add the slot content a second time into the aria-label attribute for screen readers:

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

How do I access the <slot> data? Does Vue have a special this.$xxx property where I can access slot information in JavaScript?

Answer 1

You can get the text content of the default slot with:

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>