Vue3组合式API中如何动态绑定props到子组件并保留响应式？

我封装了Button组件和基于它的高阶组件SquareButton，SquareButton新增size属性，其余props透传给Button。但遇到两个问题：

1. 直接解构props会丢失响应式，props更新时组件不刷新；
2. 用toRefs转响应式后，传递给Button的是ref对象，不符合组件的类型要求，引发报错。

以下是针对性的重构方案：

一、重构Button组件 #

核心思路：不要直接解构props对象，通过响应式的方式访问单个属性，用计算属性过滤出需要透传的props。

修改后的Button.vue：

<script setup lang="ts">
import { defineProps, withDefaults, computed } from 'vue'

export interface ButtonProps {
  width?: number
  height?: number
  // 其他需要透传的props
}

// 保留完整的props响应式对象
const props = withDefaults(defineProps<ButtonProps>(), {
  width: 150,
  height: 75,
})

// 计算属性：过滤掉width和height，得到其余要透传给原生button的props
const nativeButtonProps = computed(() => {
  const { width, height, ...rest } = props
  return rest
})
</script>

<template>
  <button v-bind="nativeButtonProps">
    <slot />
  </button>
</template>

<style scoped>
button {
  display: flex;
  /* 直接访问props的属性，保留响应式 */
  width: v-bind("props.width + 'px'");
  height: v-bind("props.height + 'px'");
}
</style>

方案说明 #

• props本身是Vue创建的响应式对象，直接访问props.width/props.height会保留响应式，无需额外转换；
• 计算属性nativeButtonProps会在props变化时自动更新，返回的是普通对象，符合原生button的属性要求，没有类型问题。

二、重构SquareButton组件 #

核心思路：用计算属性合并size和其余props，覆盖width/height，同时保留响应式。

修改后的SquareButton.vue：

<script setup lang="ts">
import Button from "./Button.vue"
import { defineProps, withDefaults, computed } from 'vue'

export interface SquareButtonProps extends ButtonProps {
  size?: number
}

// 保留完整的props响应式对象
const props = withDefaults(defineProps<SquareButtonProps>(), {
  size: 30,
})

// 计算属性：用size覆盖width和height，合并其余props
const buttonProps = computed(() => {
  const { size, ...rest } = props
  return {
    ...rest,
    width: size,
    height: size,
  }
})
</script>

<template>
  <Button v-bind="buttonProps">
    <slot />
  </Button>
</template>

方案说明 #

• 计算属性buttonProps会自动跟踪props.size和其他props的变化，确保传递给Button的props始终是最新的；
• 返回的是普通对象，完全符合ButtonProps的类型定义，不会出现类型错误；
• 无需手动处理响应式转换，Vue会自动处理依赖跟踪。

额外优化：单个属性的响应式访问 #

如果需要在script中单独使用某个props属性（比如做逻辑判断），可以用toRef来获取响应式的单个值，而不是解构：

import { toRef } from 'vue'

// 获取响应式的size属性
const size = toRef(props, 'size')

// 在script中使用时需要访问value
console.log(size.value)
// 在template中自动解包，直接用size即可

这样既保留了响应式，又不会出现ref对象传递给子组件的类型问题。

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