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但是可以正常接收属性
在这里插入图片描述

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Android桌面悬浮窗效果实现,仿360手机卫士悬浮窗效果

    Android桌面悬浮窗效果实现,仿360手机卫士悬浮窗效果大家好,今天给大家带来一个仿360手机卫士悬浮窗效果的教程,在开始之前请允许我说几句不相干的废话。不知不觉我发现自己接触Android已有近三个年头了,期间各种的成长少不了各位高手的帮助,总是有很多高手喜欢把自己的经验写在网上,供大家来学习,我也是从中受惠了很多,在此我深表感谢。可是我发现我却从来没有将自己平时的一些心得拿出来与大家分享,共同学习,太没有奉献精神了。于是我痛定思痛,决定从今天开始写博客,希望可以指点在我后面的开发者,更快地进入Android开发者的行列当中。好了,废话就说这么多,下面开始

  • DNS域名解析过程_谈谈域名解析DNS的工作原理

    DNS域名解析过程_谈谈域名解析DNS的工作原理一、主机解析域名的顺序1、找缓存2、找本机的hosts文件3、找DNS服务器注意:配置IP和主机名时,要记得修改/etc/hosts文件,因为有些应用程序在主机内的进程之间通信的时候,会本机

  • @Scope(“prototype“)//多例模式[通俗易懂]

    @Scope(“prototype“)//多例模式[通俗易懂]@Scope(“prototype”)//多例模式

  • 国密sm4加密算法

    国密sm4加密算法国密sm4加解密算法工具类,可用于生产环境packagecom.example.demo.endecryption.utils;importorg.apache.commons.codec.binary.Base64;importorg.bouncycastle.jce.provider.BouncyCastleProvider;importjavax.crypto.BadPa…

  • 2021年7月整理–简单方法 暴力激活成功教程WIFI密码

    2021年7月整理–简单方法 暴力激活成功教程WIFI密码2021年7月整理–简单方法暴力激活成功教程WIFI密码很多人都面临过短期租房、短期出差、住院而没有WIFI可用等境遇,有的是宽带太多办不起、有的是临时一阵子不值得折腾、有的是运营商不给扯线等等原因。然后就用手机下载了WIFI智能钥匙等APP,然后发现卵用么有,根本没有人共享自家WIFI密码给你用。以下是按步骤整理的软件和详细教程笔记本电脑+软件暴力激活成功教程出的密码我亲身用这个软件解开N多个密码此软件是家用路由器安全审计工具,切勿用作非法用途!!!….

  • pycharm中选择解释器_pycharm版本选择

    pycharm中选择解释器_pycharm版本选择pycharm中有两处地方需要选择python解释器:一处是调试配置(editconfigurations)处,这里选择python解释器是为了运行项目:另一处是项目设置(settings)处,这里选择python解释器是为了编写程序的时候智能提示,这里同时也可以创建python虚拟环境:…

发表回复

您的电子邮箱地址不会被公开。

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