美文网首页
vue二次封装组件,继承原组件的所有属性及事件

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

作者: 初心不改_0055 | 来源:发表于2020-03-25 23:36 被阅读0次
基本用法:
<template>
    <div
        v-bind="$attrs" 
        v-on="$listeners"
    >
      <template v-for="(index, name) in $slots" v-slot:[name]>
        <slot :name="name"/>
      </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>

相关文章

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

    基本用法: 需要添加别的属性:

  • 2019-05-28

    vue slot 组件封装 滑动事件 通过slot 父组件 调用

  • vue组件实现双向绑定

    vue组件实现双向绑定 在封装vue组件过程中,有时候会碰到需要实现组件的某个属性需要和父组件的某个值双向绑定,碰...

  • Js 学习笔记

    Vue组件透传 $attrs包含了父组件传递的所有属性,通过v-bind可以将父组件所有属性绑定到子组件 $lis...

  • vue周期函数

    1.vue中的组件 -vue中所有页面由组件组成-vue可以将公共的部分封装成组件在其他地方使用-App.vue是...

  • Vue3 属性绑定

    在写 Vue3 项目的过程中注意到当父组件给子组件传属性和事件时默认是将所有属性绑定到子组件的 根元素 上 如何根...

  • vue3.0 + vite + ts + antd model二

    1.对ant design vue model的二次封装 父组件: 子组件: 2.监听visible(props传值)

  • Attrs 和 Listeners

    这两个属性是 vue 2.4 版本之后提供的,它简直是二次封装组件或者说写高阶组件的神器。在我们平时写业务的时候免...

  • VUE 封装拖拽组件

    vue 拖拽组件封装,组件代码如下 使用方式:

  • 如何开发vue、react、angular的组件库教程

    关键词:vue,react,angular,开发,封装,ui组件,组件库,常用组件 目标:开发相应的组件库vue-...

网友评论

      本文标题:vue二次封装组件,继承原组件的所有属性及事件

      本文链接:https://www.haomeiwen.com/subject/kkwfuhtx.html