Vue3 script setup中如何获取原functional组件的data参数

在Vue3的<script setup lang="ts">语法中，原Vue2函数式组件render函数里的data参数（包含attrs、class、style等内容），可以通过useAttrs() API获取。

完整改写示例 #

原Vue2函数式组件代码：

export default Vue.extend<Props>({
  functional: true,
  render(h, { props, slots, data }) {
    const { href, external, target, type, button } = props;
    const slot = slots().default;
    console.log(data);
    // ... 原有渲染逻辑
  }
});

对应的Vue3 Script Setup代码：

<script setup lang="ts">
import { h, useSlots, useAttrs, toRefs } from 'vue';

// 定义组件Props类型
interface Props {
  href?: string;
  external?: boolean;
  target?: string;
  type?: string;
  button?: boolean;
}

// 声明组件Props
const props = defineProps<Props>();
// 获取插槽
const slots = useSlots();
// 获取对应Vue2中data的attrs、class、style等内容
const attrs = useAttrs();

// 如需解构attrs且保留响应性，可使用toRefs
const { class: className, style, href: attrHref, target: attrTarget } = toRefs(attrs);

// 输出attrs内容，与原Vue2的data结构对应
console.log(attrs);

// 自定义渲染逻辑（示例）
const renderComponent = () => {
  const defaultSlot = slots.default?.() || [];
  const finalTarget = props.external ? '_blank' : props.target || attrTarget.value;
  const finalHref = props.href || attrHref.value;

  return h(props.button ? 'button' : 'a', {
    ...attrs, // 传递所有attrs、class、style等
    href: finalHref,
    target: finalTarget
  }, defaultSlot);
};

// 暴露渲染函数供Vue调用
defineExpose({ render: renderComponent });
</script>

关键说明 #

• useAttrs()返回一个响应式对象，包含父组件传递的所有非Props属性，对应原Vue2函数式组件data中的attrs、class、style、domProps等字段。
• 若需要解构attrs且保留响应性，需使用toRefs()处理，直接解构会丢失响应性。
• Vue3中不再需要声明functional: true，通过Composition API即可实现函数式组件的逻辑。
• 渲染时可直接将attrs展开传递给h函数，自动处理class、style及其他属性绑定。

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