Vue.js 2.6中如何在JavaScript里访问<slot>内容

针对你的需求，分Vue 2和Vue 3两种版本提供解决方案：

Vue 2 实现方式 #

可以通过this.$slots.default访问默认插槽的VNode数组，从中提取文本内容：

1. 在组件的计算属性中处理插槽文本：

export default {
  computed: {
    buttonLabel() {
      let labelText = ''
      // 遍历默认插槽的VNode节点
      this.$slots.default.forEach(vnode => {
        // 提取文本节点内容并去除空格
        if (typeof vnode.text === 'string') {
          labelText += vnode.text.trim()
        }
      })
      return labelText
    }
  }
}

2. 在模板中绑定aria-label：

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

Vue 3 实现方式 #

Vue 3中$slots的返回值是函数，需要调用后获取VNode数组，也可以用Composition API的useSlots：

选项式API写法 #

export default {
  computed: {
    buttonLabel() {
      let labelText = ''
      // 调用default()获取插槽VNode数组
      const defaultSlot = this.$slots.default() || []
      defaultSlot.forEach(vnode => {
        // 判断是否为文本节点并提取内容
        if (vnode.type === Text) {
          labelText += vnode.children.trim()
        }
      })
      return labelText
    }
  }
}

组合式API写法 #

import { useSlots, computed } from 'vue'

export default {
  setup() {
    const slots = useSlots()
    const buttonLabel = computed(() => {
      let labelText = ''
      const defaultSlot = slots.default?.() || []
      defaultSlot.forEach(vnode => {
        if (vnode.type === Text) {
          labelText += vnode.children.trim()
        }
      })
      return labelText
    })
    return { buttonLabel }
  }
}

模板绑定和Vue 2一致：

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

更简洁的替代方案 #

如果按钮文本比较简单，推荐通过props传递文本内容，同时作为插槽默认值和aria-label，这样更可控：

1. 组件定义：

export default {
  props: {
    label: {
      type: String,
      required: true
    }
  }
}

2. 组件模板：

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

3. 使用组件：

<Button @click="clickEvent" label="Download Item">Download Item</Button>
<!-- 或者直接用默认插槽，省略内部文本：<Button @click="clickEvent" label="Download Item"></Button> -->

内容的提问来源于stack exchange，提问作者M-