How to reference text that's in '<slot></slot>' in Vue.js

Question

How to reference text that's in in Vue.js?

Vue.component('component', {
  template: `<button><slot></slot></button>`,
  created: function() {
    // i would like to access the text in slot here
  }
});

Answer 1

For Vue 3.

The answer from @bert works well on Vue 2, but Vue 3 slots have a more complex structure.

Here is one way to get the slots text contents (from default slot) on Vue 3.

const getSlotChildrenText = children => children.map(node => {
  if (!node.children || typeof node.children === 'string') return node.children || ''
  else if (Array.isArray(node.children)) return getSlotChildrenText(node.children)
  else if (node.children.default) return getSlotChildrenText(node.children.default())
}).join('')


const slotTexts = this.$slots.default && getSlotChildrenText(this.$slots.default()) || ''
console.log(slotTexts)