zoukankan      html  css  js  c++  java
  • vue中二次封装别人组件,动态传属性使用v-bind="$attrs" 和 v-on="$listeners"

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

    这时候就可以使用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'/>
    

      非常的方便!

  • 相关阅读:
    singleTon 模式
    最近的工作经验
    sql server里的快捷键
    Bridge 模式
    [转]在.NET客户端程序中使用多线程
    wse
    关于高频查询界面
    判断字段值已经存在
    获取当前供应商的联系人信息
    获取系统常量
  • 原文地址:https://www.cnblogs.com/bobo1/p/12600904.html
Copyright © 2011-2022 走看看