vue $attrs的使用

vue $attrs的使用$attrs的使用vue$attrs是在vue的2.40版本以上添加的。项目中有多层组件传参可以使用$attrs,可以使代码更加美观,更加简洁,维护代码的时候更方便。如果使用普通的父子组件传参prop和$emit,$on会很繁琐;如果使用vuex会大材小用,只是在这几个组件中使用,没必要使用vuex;使用事件总线eventBus,使用不恰当的话,有可能会出现事件多次执行。如果给组件传递…

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

Jetbrains全系列IDE稳定放心使用

$attrs的使用 vue

  • $attrs是在vue的2.40版本以上添加的。
  • 项目中有多层组件传参可以使用$attrs,可以使代码更加美观,更加简洁,维护代码的时候更方便。如果使用普通的父子组件传参prop$emit$on会很繁琐;如果使用vuex会大材小用,只是在这几个组件中使用,没必要使用vuex;使用事件总线eventBus,使用不恰当的话,有可能会出现事件多次执行。
  • 如果给组件传递的数据,组件不使用props接收,那么这些数据将作为组件的HTML元素的特性,这些特性绑定在组件的HTML根元素上
  • inheritAttrs: false的含义是不希望本组件的根元素继承父组件的attribute,同时父组件传过来的属性(没有被子组件的props接收的属性),也不会显示在子组件的dom元素上,但是在组件里可以通过其$attrs可以获取到没有使用的注册属性, “inheritAttrs: false`是不会影响 style 和 class 的绑定
  • 以下是$attrs的使用示例(父组件的列表行数据传递给孙子组件展示)
  1. 父组件(Father.vue),给子组件关联数据,子组件如果不用props接收,那么这些数据就作为普通的HTML特性应用在子组件的根元素上
<template>
  <div>
    <el-table :data='list'>
      <el-table-column
        prop="name"
        label="姓名"
      ></el-table-column>
      <el-table-column
        prop="study"
        label="学习科目"
      ></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click='transmitClick(scope.row)'>传递</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 儿子组件 -->
    <ChildView
      :is-show="isOpen"
      :row="row"
    >
    </ChildView>
  </div>
</template>

<script>
import ChildView from './Child.vue'
export default { 
   
  components: { 
    ChildView },
  data() { 
   
    return { 
   
      isOpen: false,
      row: { 
   },
      list: [
        { 
    name: '王丽', study: 'Java' },
        { 
    name: '李克', study: 'Python' }
      ]
    }
  },
  methods: { 
   
    // 传递事件
    transmitClick(row) { 
   
      this.isOpen = true;
      this.row = row
    }
  }
}
</script>
  1. 儿子组件(Child.vue),中间层,作为父组件和孙子组件的传递中介,在儿子组件中给孙子组件添加v-bind="$attrs",这样孙子组件才能接收到数据
<template>
  <div class='child-view'>
    <p>儿子组件</p>
    <GrandChild v-bind="$attrs"></GrandChild>
  </div>
</template>

<script>
import GrandChild from './GrandChild.vue'
export default { 
   
  // 继承所有父组件的内容
  inheritAttrs: true,
  components: { 
    GrandChild },
  data() { 
   
    return { 
   
    }
  }
}
</script>

<style lang="stylus">
.child-view { 
   
  margin: 20px
  border: 2px solid red
  padding: 20px
}
</style>
  1. 孙子组件(GrandChild.vue),在孙子组件中一定要使用props接收从父组件传递过来的数据
<template>
  <div class='grand-child-view'>
    <p>孙子组件</p>
    <p>传给孙子组件的数据:{ 
   { 
   row.name}} { 
   { 
   row.name !== undefined? '学习' : ''}} { 
   { 
   row.study}}</p>
  </div>
</template>

<script>
export default { 
   
  // 不想继承所有父组件的内容,同时也不在组件根元素dom上显示属性
  inheritAttrs: false,
  // 在本组件中需要接收从父组件传递过来的数据,注意props里的参数名称不能改变,必须和父组件传递过来的是一样的
  props: { 
   
    isShow: { 
   
      type: Boolean,
      dedault: false
    },
    row: { 
   
      type: Object,
      dedault: () => { 
    }
    }
  }
}
</script>

<style lang="stylus">
.grand-child-view { 
   
  border: 2px solid green
  padding: 20px
  margin: 20px
}
</style>

结果:
在这里插入图片描述

在上面提过,如果给子组件传递的数据,子组件不使用props接收,那么这些数据将作为子组件的特性,这些特性绑定在组件的HTML根元素上,在vue2.40版本之后,可以通过inheritAttrs = false 来控制这些特性是否显示在dom元素上 如:案例中父组件给子组件传递的row和isShow,子组件没有使用props接收,这个2个数据直接作为HTML的特殊属性。子组件使用inheritAttrs = true,那么特性显示在dom上,如果设置为false,那么特性不显示在dom上
在这里插入图片描述

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

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

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

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

(0)


相关推荐

  • fprintf函数的用法_itoa函数

    fprintf函数的用法_itoa函数fprintf()用于文件操作#includeintfprintf(FILE*stream,constchar*format,…);fprintf()函数根据指定的format(格式)发送信息(参数)到由stream(流)指定的文件.

    2022年10月19日
  • 全国计算机考试一级与ata,ata(ata证书是计算机一级吗)

    全国计算机考试一级与ata,ata(ata证书是计算机一级吗)2021年6月20日发(作者:665)12月计算机一级模拟训练2016年12月计算机一级模拟训练一、单项选择题:1、一个汉字的内码长度为2字节,其每个字节的二进制位的值分别为.A.0,0B.1,1C.1,0D.0,12、运算器的主要功能是.A.进行算术运算B.实现逻辑运算C.实现加法运算D.进行算术运算或逻辑运算3、计算机能直接识别和执行的语言是.A.机器语言B.高级语言C.汇编语言D.数据库语言…

  • SpringMVC面试题大总结「建议收藏」

    SpringMVC面试题大总结「建议收藏」1、什么是SpringMVC?简单介绍下你对springMVC的理解?2、SpringMVC的流程?3、Springmvc的优点:4、SpringMVC怎么样设定重定向和转发的?5、SpringMVC常用的注解有哪些?6、SpingMvc中的控制器的注解一般用哪个?有没有别的注解可以替代?7、springMVC和struts2的区别有哪些?8、如何解决POST请求中文乱码问题,GET的又如何处理呢?9、SpringMvc里面拦截器是怎么写的:10、上传图片?11、SpringMvc怎么和AJA

  • pkl文件是什么_python pkl文件

    pkl文件是什么_python pkl文件这里只介绍关于字典类型和列表类型的数据的存储,其他格式的请君自行探索。1、字典类型importpickle#首先导入这个库,没有安装的话,自行百度,很简单dict_data={“name”:[“张三”,”李四”]}withopen(“dict_data.pkl”,’wb’)asfo:#将数据写入pkl文件pickle.dump(dict_data,fo)with…

  • 基于51单片机的步进电机的控制

    基于51单片机的步进电机的控制前面笔者分享过基于51单片机的两种小车制作,我们利用的是L298N驱动控制电机转动,那么接下来,笔者给大家介绍两种利用51单片机控制步进电机的小程序。首先我们要如何使电机转动呢,源程序如下:#include&lt;reg52.h&gt;unsignedcharcodeF_Rotation[4]={0x02,0x04,0x08,0x10};//正转表格,换算成二进制00…

  • client的中文意思是什么_java中cin什么意思

    client的中文意思是什么_java中cin什么意思IE中: document.body.clientWidth==>BODY对象宽度 document.body.clientHeight==>BODY对象高度 document.documentElement.clientWidth==>可见区域宽度 document.documentElement.clientHeight==>可见区域高度 FireFox中:

发表回复

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

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