vue中二次封装别人组件,动态传属性使用v-bind="$attrs" 和 v-on="$listeners"

时间:2024-02-17 20:12:59

当我们去二次封装别人组件时,可能别人组件上有很多属性,我们不想再次重写一遍

这时候就可以使用v-bind="$attrs" 和 v-on="$listeners"。这是vue 2.4 版本提供

 vm.$attrs 是一个属性,其包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。这些未识别的属性可以通过 v-bind="$attrs" 传入内部组件。未识别的事件可通过v-on="$listeners"传入。

举个例子,比如我创建了我的按钮组件myButton,封装了 element-ui 的 el-button 组件(其实什么事情都没做),在使用组件 <my-button />时,就可以直接在组件上使用 el-button 的属性,不被 prop 识别的属性会传入到 el-button 元素上去

 

<template>
  <div>
    <el-button v-bind="$attrs">确定</el-button>
  <div>
</template>

// 父组件使用
<my-button type=\'primary\' size=\'mini\'/>

  非常的方便!