Vue2.4中$attrs和$listeners的使用-学习笔记

Vue2.4中$attrs和$listeners的使用-学习笔记首先我们来看下面的一张图,图中表示一个多级组件嵌套的情形。现在我们来讨论一种情况,A组件与C组件怎么通信,我们有多少种解决方案?我们使用VueX来进行数据管理,但是如果项目中多个组件共享状态比较少,项目比较小,并且全局状态比较少,那使用VueX来实现该功能,并没有发挥出VueX的威力。 使用B来做中转站,当A组件需要把信息传给C组件时,B接受A组件的信息,然后利用属性传给C组件,这是…

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

Jetbrains全系列IDE稳定放心使用

首先我们来看下面的一张图,图中表示一个多级组件嵌套的情形。

Vue2.4中$attrs和$listeners的使用-学习笔记

现在我们来讨论一种情况,A组件与C组件怎么通信,我们有多少种解决方案?

  1. 我们使用VueX来进行数据管理,但是如果项目中多个组件共享状态比较少,项目比较小,并且全局状态比较少,那使用VueX来实现该功能,并没有发挥出VueX的威力。
  2. 使用B来做中转站,当A组件需要把信息传给C组件时,B接受A组件的信息,然后利用属性传给C组件,这是一种解决方案,但是如果嵌套的组件过多,会导致代码繁琐,代码维护比较困难;如果C中状态的改变需要传递给A, 使用事件系统一级级往上传递 。本来
  3. 自定义一个Vue 中央数据总线,这个情况适合碰到组件跨级传递消息,但是使用VueX感觉又有点浪费的项目中,但是缺点是,碰到多人合作时,代码的维护性较低,代码可读性低

在很多开发情况下,我们只是想把A组件的信息传递给C组件,如果使用props 绑定来进行信息的传递,虽然能够实现,但是代码并不美观。

在vue2.4中,为了解决该需求,引入了$attrs 和$listeners , 新增了inheritAttrs 选项。 在版本2.4以前,默认情况下父作用域的不被认作props的属性属性百年孤独,将会“回退”且作为普通的HTML特性应用在子组件的根元素上。如下列的例子

 

父组件demo代码如下

<template>
   <div>
     <child-dom
      :foo="foo"
      :coo="foo"
     >
     </child-dom>
   </div>
</template>
<script>
   import childDom from "./ChildDom.vue";
   export default {
     data() {
        return {
          foo:"Hello, world",
          coo:"Hello,rui"
        }
     },
     components:{childDom},
   }
</script>

子组件child-dom代码如下

<template>
   <div>
      <p>foo:{
 
 {foo}}</p>
   </div>
</template>
<script>
export default {
 name:'child-dom'
 props:["foo"]
}
</script>

当显示父组件时,查看Dom结构,结构如下
Vue2.4中$attrs和$listeners的使用-学习笔记

在2.4中新增选项inheritAttrs  inheritAttrs的默认值为true, 将inheritAttrs的值设为false, 这些默认的行为会禁止掉。但是通过实例属性$attrs ,可以将这些特性生效,且可以通过v-bind 绑定到子组件的非根元素上。

修改子组件代码如下

<template>
   <div>
      <p>foo:{
 
 {foo}}</p>
      <p>attrs:{
 
 {$attrs}}</p>
      <childDomChild v-bind="$attrs"></childDomChild>
   </div>
</template>
<script>
import childDomChild from './childDomChild';
export default {
 name:'child-dom'
 props:["foo"],
 inheritAttrs:false,
}
</script>

新增子组件 childDomChild

<template>
  <div>
   <p>coo:{
 
 {coo}}</p>
  </div>
</template>
<script>
  export default {
    name:'childDomChild'
    props:["coo"],
    inheritAttrs:false
  }
</script>

输出的结果如下

Vue2.4中$attrs和$listeners的使用-学习笔记

从上面的代码,可以看出使用$attrs ,inheritAttrs 属性 能够使用简洁的代码,将A组件的数据传递给C组件 ,该场景的使用范围还是挺广的。

此时我们又想到了一个问题,c组件的信息,怎么同步给a组件呢? 

vue2.4版本新增了$listeners 属性,我们在b组件上 绑定 v-on=”$listeners”, 在a组件中,监听c组件触发的事件。就能把c组件发出的数据,传递给a组件。

A组件代码更新如下

<template>
 <div>
   <child-dom
    :foo="foo"
    :coo="coo"
     v-on:upRocket="reciveRocket"
   >
   </child-dom>
 </div>
</template>
<script>
 import childDom from "@/components/ChildDom.vue";
 export default {
   name:'demoNo',
   data() {
     return {
       foo:"Hello, world",
        coo:"Hello,rui"
    }
  },
 components:{childDom},
 methods:{
   reciveRocket(){
      console.log("reciveRocket success")
   }
 }
}
</script>

b组件更新如下

<template>
 <div>
 <p>foo:{
 
 {foo}}</p>
 <p>attrs:{
 
 {$attrs}}</p>
 <childDomChild v-bind="$attrs" v-on="$listeners"></childDomChild>
 </div>
</template>
<script>
import childDomChild from './childDomChild';
export default {
 name:'child-dom'
 props:["foo"],
 inheritAttrs:false,
}
</script>

c组件更新如下

<template> 
 <div>
 <p>coo:{
 
 {coo}}</p>
 <button @click="startUpRocket">我要发射火箭</button>
 </div>
</template>
<script>
 export default {
 name:'childDomChild',
 props:['coo'],
 methods:{
 startUpRocket(){
 this.$emit("upRocket");
 console.log("startUpRocket")
 }
 }
 }
</script>

运行效果如下

Vue2.4中$attrs和$listeners的使用-学习笔记

 

现在我们应该清楚了$attrs,$listernersinheritAttrs 的作用了吧

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

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

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

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

(0)


相关推荐

  • 《Linux内核设计与实现》读书笔记(十六)- 页高速缓存和页回写

    《Linux内核设计与实现》读书笔记(十六)- 页高速缓存和页回写

  • Struts2 FilterDispatcher的作用[通俗易懂]

    Struts2 FilterDispatcher的作用[通俗易懂]org.apache.struts2.dispatcher.FilterDispatcher是Struts2的主要的Filter,负责四个方面的功能:  (1)执行Actions  (2)清除ActionContext  (3)维护静态内容  (4)清除request生命周期内的XWork的interceptors  另注:该过滤器应该过滤所有的请求URL。一般被设置

  • c语言全局变量和局部变量的区别的代码_函数的形参都属于全局变量

    c语言全局变量和局部变量的区别的代码_函数的形参都属于全局变量局部变量和全局变量的区别背景:上午看书阅及这两对概念,有很多相似之处,故记之。一.局部变量&amp;全局变量1局部变量:“在函数内定义的变量”,即在一个函数内部定义的变量,只在本函数范围内有效。2全局变量:“在函数外定义的变量”,即从定义变量的位置到本源文件结束都有效。目的:增加函数间数据联系的渠道。由于同一文件中的所有函数都能引用全局变量的值,因此如果在一个函数中改变了全局变…

    2022年10月24日
  • HDFS分布式文件存储系统详解

    HDFS分布式文件存储系统详解HDFS简介一、HDFS:HadoopDistributedFileSystem          1. 一个分布式文件系统           2. 基于流数据模式访问和处理超大文件的需求而开发的          3. 适合应用在大规模数据集上     优点:                1.处理超大文件                   能用来存储管理PB级的数据 …

  • 万能乘法速算法大全_小学数学指算法、加法、减法、乘法、除法简便运算方法大全,收藏…[通俗易懂]

    万能乘法速算法大全_小学数学指算法、加法、减法、乘法、除法简便运算方法大全,收藏…[通俗易懂]在小学数学的学习过程中,计算能力不过关的孩子,数学成绩普遍来说都不算特别理想。很多家长都在反映说,孩子数学成绩非常糟糕,其实很大的一个原因就是因为计算能力不过关。计算能力不仅对于孩子数学成绩的影响非常的大,对于其他各科的影响也是非常的大,可以毫不夸张的说,计算能力不过关的孩子,学习成绩都不是十分理想。根据我在一线教育从事了十几年的经验来说,很多其实都有他们的共同点,我发现孩子在学习数学的过程中遇到…

  • 异步传输模式atm实际上是两种交换技术的结合_异步转移模式ATM

    异步传输模式atm实际上是两种交换技术的结合_异步转移模式ATMATM是AsynchronousTransferMode(ATM)异步传输模式的缩写ATM是一项数据传输技术。ATM是以信元为基础的一种分组交换和复用技术,它是一种为了多种业务设计的通用的面向连接的传输模式。它适用于局域网和广域网,它具有高速数据传输率和支持许多种类型如声音、数据、传真、实时视频、CD质量音频和图像的通信。ATM是在LAN或WAN上传送声音、视频图像和数据的宽带技术。它是一项

发表回复

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

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