Laravel Mix+PHP环境下Vue组件通过Wrapper传递props的方案咨询

以下几种方案可以不用在Wrapper组件中显式声明props，直接将父组件（PHP渲染时传入）的属性透传给ComponentOne：

1. 利用Vue的$attrs进行属性透传 #

这是最常用的方案，$attrs包含了父组件传递给当前组件、但未被当前组件props或emits声明的所有属性（Vue3中还包含了事件监听器）。在Wrapper组件的模板里，直接通过v-bind="$attrs"把这些属性绑定到ComponentOne上即可：

<template>
  <div class="wrapper-container">
    <!-- 自动透传所有未被Wrapper声明的props，包括role -->
    <ComponentOne v-bind="$attrs" />
  </div>
</template>

<script>
import ComponentOne from './ComponentOne.vue'

export default {
  components: { ComponentOne }
}
</script>

这种方式会完整保留属性的类型（比如PHP传入的Number类型role），同时如果Wrapper后续需要添加自己的props，也不会影响透传逻辑——$attrs会自动排除已被Wrapper声明的props。

2. 通过Render函数透传属性 #

如果你的Wrapper组件是用Render函数编写的，可以直接将$attrs作为参数传递给ComponentOne的虚拟节点：

import ComponentOne from './ComponentOne.vue'

export default {
  components: { ComponentOne },
  render(h) {
    return h(ComponentOne, {
      attrs: this.$attrs,
      // Vue2中需要额外透传事件监听器：on: this.$listeners
    })
  }
}

3. Vue3 Composition API 中使用useAttrs #

如果你的项目是Vue3且使用Composition API，可以通过useAttrs钩子获取所有父组件传入的属性，再绑定到ComponentOne上：

<script setup>
import { useAttrs } from 'vue'
import ComponentOne from './ComponentOne.vue'

const attrs = useAttrs()
</script>

<template>
  <div class="wrapper">
    <ComponentOne v-bind="attrs" />
  </div>
</template>

需要注意的是，无论用哪种方案，都要确保ComponentOne的props声明正确（比如role的类型为Number），这样透传过来的属性会被Vue正确校验和转换。

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