vue二次封装组件,继承原组件的所有属性及事件

基本用法 (vue2):
<template>
    <div
        v-bind="$attrs" 
        v-on="$listeners"
    >
      <template v-for="(index, name) in $slots" v-slot:[name]="data">
        <slot :name="name" v-bind="data" />
      </template>
    </div>
</template>
需要添加别的属性:
<template>
    <div
        v-bind="$attrs" 
        v-on="$listeners"
        :style="{ color: color }"
    >
        <slot></slot>
    </div>
</template>

<script>
    export default{
        name: "test",
        props: {
            color: String
        },
    }
</script>
基本用法 (vue3):

Vue3中将 $listener 删除了,统一使用 $attrs.

<template>
    <div v-bind="$attrs" >
      <template v-for="(obj, name) in $slots" v-slot:[name]="data">
        <slot :name="name" v-bind="data" />
      </template>
    </div>
</template>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 这是16年5月份编辑的一份比较杂乱适合自己观看的学习记录文档,今天18年5月份再次想写文章,发现简书还为我保存起的...
    Jenaral阅读 2,830评论 2 9
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,366评论 0 7
  • 博客内容:什么是面向对象为什么要面向对象面向对象编程的特性和原则理解对象属性创建对象继承 什么是面向对象 面向对象...
    _Dot912阅读 1,447评论 3 12
  • 岁月不过一场你追我赶的时光之旅,它记录了人生所有的旅程。 不管是春去秋来的盛夏暖阳,还是寒冬酷暑的闷热时节,一切好...
    工地在逃人员阅读 237评论 0 0
  • 第三章:金色玉印 邹健回到家,在电脑里看了会股票,股票绿油油一片。他觉得今天不会有什么变化,就关了电脑,一个人在街...
    旭眼看乾坤阅读 308评论 0 1