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

最新推荐文章于 2024-05-14 15:15:15 发布

crowu_n

最新推荐文章于 2024-05-14 15:15:15 发布

阅读量723

点赞数 1

分类专栏：干货

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/spider_on_net/article/details/119571952

版权

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

摘要由CSDN通过智能技术生成

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

最低0.47元/天解锁文章

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
vue 二次封装如何做透传+覆盖

<template> <el-pagination v-on="$listeners" v-bind="$props" :layout=" $props.pageSizes ? 'prev, pager, next, jumper, ->, total, sizes' : 'prev, pager, next, jumper, ->,
复制链接

扫一扫

专栏目录

crowu_n CSDN认证博客专家 CSDN认证企业博客

码龄4年

12: 原创

38万+: 周排名

113万+: 总排名

4594: 访问

: 等级

96: 积分

0: 粉丝

3: 获赞

4: 评论

4: 收藏

私信

关注

热门文章

分类专栏

干货 11篇

最新评论

scrollIntoView 滚不动
realoneX: TSKR!!!
vue 二次封装如何做透传+覆盖
crowu_n: 发现直接用 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]
vue 二次封装如何做透传+覆盖
crowu_n: 没太懂你说的覆盖没实现是什么意思？这里的覆盖指的就是 layout 自控了。$attrs 的话不能自己覆盖 default、validator 等属性，说白了， $attrs 就【只有值】而已，跟 props 还是相去甚远
vue 二次封装如何做透传+覆盖
一只躺猫: 透传是透传了, 但父组件属性覆盖子组件属性还是没实现, 还是得在子组件声明属性再覆盖. 你这样写实际写麻烦了, 直接v-bind="$attrs"就行了

最新文章

目录

评论 3

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。