Vue 3如何向slot传递props？自定义select组件插槽传参无法接收怎么办

你遇到的是Vue作用域插槽的参数传递逻辑问题：通过slot传递的属性不会自动注入到插槽内的子组件中，需要手动接收后绑定给对应组件。两种常见实现方案如下：

方案1：作用域插槽手动传参（数据流向清晰） #

1. 你现有的vb-select组件插槽暴露参数的写法已经正确，无需修改。
2. 在使用vb-select的地方，先接收插槽暴露的参数，再绑定给vb-option：

<vb-select v-model="container"
           title="bla bla"
           multiple
           v-slot="{ multiple }">
  <vb-option 
    v-for="(item, idx) in items" 
    :key="idx" 
    :value="item"
    :multiple="multiple"
  >{{item}}</vb-option>
</vb-select>

3. 若要在vb-option中监听参数变化，直接监听multiple prop即可：

<script>
export default {
  props: {
    multiple: Boolean,
  },
  watch: {
    multiple(newVal) {
      // 这里写值变化后的处理逻辑
    }
  }
}
</script>

方案2：provide/inject共享上下文（组件库场景更友好） #

如果是开发固定搭配的组件库，不需要用户手动传递参数，可以用provide/inject实现上下文共享，避免逐层传参：

1. 在vb-select中提供共享上下文：

<script>
export default {
  props: {
    multiple: Boolean,
    // 其他props
  },
  data() {
    return {
      state: false
    }
  },
  // Vue2/3通用写法，若要实现响应式可以返回计算属性
  provide() {
    return {
      vbSelectContext: {
        multiple: this.multiple,
        state: this.state
      }
    }
  }
}
</script>

2. 在vb-option中注入上下文直接使用，无需额外传参：

<template>
  <li class="vb-option">
    {{ vbSelectContext.multiple }}
  </li>
</template>
<script>
export default {
  inject: ['vbSelectContext'],
  watch: {
    'vbSelectContext.multiple'(newVal) {
      // 监听值变化的处理逻辑
    }
  }
}
</script>

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