vue 二次封装如何做透传+覆盖

最新推荐文章于 2025-08-15 17:26:51 发布

原创

最新推荐文章于 2025-08-15 17:26:51 发布 · 951 阅读

CC 4.0 BY-SA版权

本文将深入探讨在Vue中如何进行组件的二次封装，重点讲解如何实现属性和方法的透传以及如何在不破坏封装性的同时覆盖原有功能。通过实例解析，帮助开发者掌握这一关键技巧。

<template>
    <el-pagination
        v-on="$listeners"
        v-bind="$props"
        :layout="
            $props.pageSizes
                ?

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

关注关注

专栏目录

10-11

784

3 条评论

一只躺猫 2021.11.24
透传是透传了, 但父组件属性覆盖子组件属性还是没实现, 还是得在子组件声明属性再覆盖. 你这样写实际写麻烦了, 直接v-bind="$attrs"就行了
- crowu_n回复一只躺猫 2022.02.10
  发现直接用 v-bind="$attrs" 还有一个问题 [code=javascript] // template <template> <el-tag class="ellipsis-tag" :class="{ 'ellipsis-tag--closable': $attrs.closable }" v-bind="$attrs" v-on="$listeners" > <slot></slot> </el-tag> </template> // 调用处 <WrapTag closable>123</WrapTag> // 问题 $attrs.closable 会为 ""，导致 closable 的 class 加不上。要这样传才没问题 <WrapTag :closable="true">123</WrapTag> [/code]
- crowu_n回复一只躺猫 2022.01.25
  没太懂你说的覆盖没实现是什么意思？这里的覆盖指的就是 layout 自控了。$attrs 的话不能自己覆盖 default、validator 等属性，说白了， $attrs 就【只有值】而已，跟 props 还是相去甚远