vue组件通讯之$attrs

vue组件通讯之$attrs使用场景我们会遇到这样的场景,比如对element-ui的el-table组件进行二次开发,但是el-table组件有很多属性比如控制高度的height,传入数据的data还有border、size、fit等一个个的去传显然不大现实,这个使用用$attrs处理起来就会特别优雅。举例子组件:自定义组件对el-table进行封装,用$attrs接收父组件传过来的属性<template&g…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

使用场景

我们会遇到这样的场景,比如对element-ui的el-table组件进行二次开发,但是el-table组件有很多属性比如控制高度的height,传入数据的data还有border、size、fit等一个个的去传显然不大现实,这个使用用$attrs处理起来就会特别优雅。

举例

子组件:自定义组件对el-table进行封装,用$attrs接收父组件传过来的属性

<template>
  <el-table v-bind="$attrs">
    <slot />
  </el-table>
</template>

<script> export default { 
     name: "test", data() { 
     return { 
    }; } }; </script>

父组件:

<template>
  <div>
    <e-test :data="tableData" border>
      <el-table-column label="名字" prop="name"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
    </e-test>
  </div>
</template>

<script> import eTest from "./a.vue"; export default { 
     name: "Menu2", components: { 
     eTest }, data() { 
     return { 
     tableData: [{ 
     name: "tom1", age: 22 }, { 
     name: "tom2", age: 33 }] }; } }; </script>

效果

子组件中没有写props但是可以正常接收属性
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/180800.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 一个封装的BeanCopier工具类[通俗易懂]

    一个封装的BeanCopier工具类[通俗易懂]工具类BeanCopierUtils1.支持source对象到target对象的拷贝2.支持Listsource到Listtarget的拷贝

    2022年9月3日
    3
  • 小程序:matlab解微分方程「建议收藏」

    functionf=ball_trajectory(t,y);g=9.81;pi=3.14159265;air_density=1.20;M=57.5*0.001;D=64.0*0.001;R=D*0.5;A=pi*R*R;Cd=0.507;ratio_Cl_to_S=0.5

    2022年4月16日
    39
  • 全国计算机三级数据库技术

    全国计算机三级数据库技术全国计算机等级考试三级(数据库技术)一:考试内容及要求1.掌握数据库技术的基本概念、原理、方法和技术2.能够使用SQL语言实现数据库操作3.具备数据库系统安装、配置及数据库管理和维护的基本4.掌握数据库管理与维护的基本方法5.掌握数据库性能优化的基本方法6.了解数据库应用系统的生命周期及其设计、开发过程7.熟悉常用的数据库管理和开发工具、具备用指定的工具管理、开发简单数据库应用系统…

    2022年6月18日
    14
  • Android常用加密库集合

    Android常用加密库集合QS,为了整合常用的各大加解密工具,把各大常用加密方式集合成一个工具库,目前包括:1RSA2AES33DES/DES4HMAC_SHA15国密SM2/SM3/SM46MD57DSA使用简例调用eg1(SM4对称加密):AbstractCodercipher=EncryptionManager.getCipher(EncryptionManager.Model….

    2022年5月13日
    42
  • 用C语言写一个查单词的小demo「建议收藏」

    用C语言写一个查单词的小demo「建议收藏」用C语言写一个查单词的小demo#include<stdio.h>#include<string.h>#include<stdlib.h>intmain(intargc,constchar*argv[]){ //用只读的方式打开我们的单词库FILE*fp=fopen(“dict.txt”,”r”);if(NULL==fp){perror(“fopen”);return-1

    2022年6月17日
    18
  • dota2连接服务器没有响应,win10系统dota2无法与任何服务器建立连接的解决方法

    dota2连接服务器没有响应,win10系统dota2无法与任何服务器建立连接的解决方法很多小伙伴都遇到过win10系统dota2无法与任何服务器建立连接的情况,想必大家都遇到过win10系统dota2无法与任何服务器建立连接的情况吧,那么应该怎么处理win10系统dota2无法与任何服务器建立连接呢?我们依照1、按下windows+Q组合键打开搜索框,在搜索框中搜索cmd,在搜索结果中我们可以看到命令提示符在命令提示符选项上单击右键,选择【以管理员身份运行】;2、在命令…

    2022年5月13日
    92

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号