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)
blank

相关推荐

  • Java中byte类型的范围「建议收藏」

    Java中byte类型的范围「建议收藏」java种为什么byte的范围是-128~127在java中byte类型占8位表示的范围是00000000~11111111总共256个数,java中byte类型有正负,最高位表示正负,0为正,1为负。我们先看正数:00000000~01111111(原码)(0~127,共128个数)我们知道在计算机系统中,数值一律用补码来表示和存储。正数的原码,反码,补码…

  • vue中 关于$emit的用法

    vue中 关于$emit的用法1、父组件可以使用props把数据传给子组件。2、子组件可以使用$emit触发父组件的自定义事件。vm.$emit(event,arg)//触发当前实例上的事件vm.$on(event,fn);//监听event事件后运行fn;例如:子组件:<template><divclass=”train-city”>&l………

  • petalinux笔记[通俗易懂]

    petalinux笔记[通俗易懂]记录一下这两天用正点原子开发板学petalinux的过程,众所周知,ZYNQ可以跑逻辑的FPGA,也可以跑裸机的SDK代码,还能跑个linux系统。在SDK开发中,只是在塔好的FPGA上跑一些简单的c代码,还没有安装上一个系统。1.首先是petalinux2018.3版本的安装建议参考正点原子的安装方法,注意事项就是使用ubuntu16.04版本而不是ubuntu18。要么就用ubuntu16.04配上petalin2018.3版本,要么就是ubuntu18配上pet…

  • Pycharm虚拟环境解析

    Pycharm虚拟环境解析什么是Pycharm中的虚拟环境 假如想要在Pycharm中建立两个项目,并且这两个项目需要用到同一个第三方库的不同版本,如果这两个项目共享一个运行环境,那么此时就会发生版本冲突问题。为了解决这个问题,Pycharm提供了Virtualenv(即,虚拟环境)。Virtualenv可以创建一套独立运行的Python环境,从而做到不同项目之间的隔离。当需要安装该环境所需要的包时,在设置—项目—…

    2022年10月30日
  • idea热部署(JRebel实现)

    idea热部署(JRebel实现)idea热部署(JRebel实现)1.安装JRebel插件//1.File->Settings->Plugins->搜索JRebel插件//2.搜索的时候可能任何插件都搜索不到,可以百度查找设置httpProxy配置配置JRebel插件//1.在左下角的JRebel菜单栏找到JRebel插件然后将需要热更新的项目打上对勾即可。启动项目//1.配置完成后使用JRebel按钮进行启动项目,配置成功日志框中会显示JRebel相关的日志信息。

  • Vagrant系列(二)—-Vagrant的配置文件Vagrantfile详解

    Vagrant系列(二)—-Vagrant的配置文件Vagrantfile详解

发表回复

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

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