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)
上一篇 2022年10月18日 上午6:00
下一篇 2022年10月18日 上午6:00


相关推荐

  • 谷歌地球Google Earth打不开的解决办法[通俗易懂]

    谷歌地球Google Earth打不开的解决办法[通俗易懂]从2020年11月20号左右,谷歌地球中国服务器全部关停,所有原来可以使用的hosts,全部不能使用了,导致原来可以在电脑上打开谷歌地球的,现在全部提示无网络,如下图:这个是谷歌地球的最新版,一样打不开:解决办法,尝试了,国内所有的有关谷歌地图的软件。唯一现在可以使用的:BIGEMAP如下图分下下载地址,大家可以安装来试一试,免费可用:http://download.bigemap.com/bmsetup.rar欢迎留言,提供更多谷歌地球的信息…

    2026年1月27日
    5
  • goland 2021.11.4激活_最新在线免费激活

    (goland 2021.11.4激活)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html4M7HSKPBXS-eyJsaWNlbnNlSW…

    2022年3月29日
    43
  • 久坐提醒 android wear,这五个理由告诉你为什么需要一块智能手表![通俗易懂]

    久坐提醒 android wear,这五个理由告诉你为什么需要一块智能手表![通俗易懂]来源:驱动号作者:2019-06-14/17:15访问量:摘要智能化可穿戴设备现如今已经普及,如果你还没有一块智能手表,现在是时候戴一下了。智能手表与智能手机相比,带来的都是潜在性的好处。虽然智能手表并不能保证你一定会多运动,也不能保证你一定会少玩手机。但是它可以提供一种让生活更好的选择,这种选择可能就足以改变我们的生活。过去的几年,关于智能手表的讨论都是”要不要买一款智能手表”,而…

    2026年4月16日
    5
  • 十二、Maven项目模板「建议收藏」

    十二、Maven项目模板「建议收藏」Maven提供用户,使用原型的概念,不同类型的项目模板(以数字614)是一个非常大的列表。Maven帮助用户快速开始使用以下命令创建新的Java项目mvnarchetype:generate什么是原型?原型是一个Maven插件,其任务是创建一个项目结构按照其模板。我们将使用快速启动原型插件在这里创建一个简单的Java应用程序。使用项目模板让我们打开命令控制

    2022年7月19日
    22
  • vue删除数组中某一元素_数组索引超出范围

    vue删除数组中某一元素_数组索引超出范围在前端开发中,我们经常需要对数组进行操作,增删改是经常的事情,那我们js中该如何删除指定的下标元素呢????我们用splice来操作1.定义和用法splice()方法用于添加或删除数组中的元素。注意:这种方法会改变原始数组。数组中添加新元素:varfruits=[“Banana”,”Orange”,”Apple”,”Mango”];fruits.splice(2,0,”Lemon”,”Kiwi”);fruits输出结果:Banana,Orange,Le.

    2022年8月10日
    78
  • Java EE开发四大常用框架

    Java EE开发四大常用框架JavaEE 开发四大常用框架看 StrutsStruts 是一个基于 SunJavaEE 平台的 MVC 框架 主要是采用 Servlet 和 JSP 技术来实现的 Struts 框架可分为以下四个主要部分 其中三个就和 MVC 模式紧密相关 1 模型 Model 本质上来说在 Struts 中 Model 是一个 Action 类 这个会在后面详细讨论 开发者通过其实现商业逻辑 同时用户请求通过控制器 Controller 向 Action 的转发过程是基于由 struts config xml 文件描述的配置

    2026年3月17日
    1

发表回复

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

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