脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue2.x $attrs和$listeners

简单聊聊vue2.x的$attrs和$listeners

 更新时间：2022年03月10日 09:36:25   作者：芦荟柚子茶  
vue组件之间的通信方式有很多种,props/emit,event bus,vuex,provide/inject等,还有一种通信方式就是$attrs和$listeners,下面这篇文章主要给大家介绍了关于vue2.x中$attrs和$listeners的相关资料,需要的朋友可以参考下

$attrs

$attrs 用于多层次组件传递参数（组件标签的attribute，class和style除外），爷爷辈组件向孙子辈组件传递参数（注：参数不能被父辈prop识别，一旦被父辈prop识别且获取，则孙子辈组件不能获取到该参数）

写法如下：（注：v-bind不能用简写 :）

<grand-son v-bind="$attrs" />

下面举个栗子：

爷爷（GrandFather）向父亲（Father）传递一个 msg1

向孙子（GrandSon）传递一个 msg2，孙子会一并接收 msg1（然而被父亲接走了，所以孙子收不到 msg1）

<!-- GrandFather.vue -->
<template>
  <div>
    GrandFather:
    <father :msg1="msg1" :msg2="msg2" />
  </div>
</template>

<script>
import Father from './Father.vue'
export default {
  components: { Father },
  data() {
    return {
      msg1: 'msg1',
      msg2: 'msg2'
    }
  }
}
</script>

<!-- Father.vue -->
<template>
  <div>
    Father: {{ msg1 }}
    <grand-son v-bind="$attrs" />
  </div>
</template>

<script>
import GrandSon from './GrandSon.vue'
export default {
  components: { GrandSon },
  props: ['msg1']
}
</script>

<!-- GrandSon.vue -->
<template>
  <div>GrandSon: {{ msg1 }}{{ msg2 }}</div>
</template>

<script>
export default {
  props: ['msg1', 'msg2']
}
</script>

界面现实结果：

GrandFather:
Father: msg1
GrandSon: msg2

$listeners

$listeners 用于多层次组件传递事件监听器，爷爷辈组件向父辈、孙子辈、曾孙子辈……组件传递事件（与 $attrs 不同，不存在半路被拦截的情况）

写法如下：（注：v-on 不能用简写 @，虽然不报错，但是也不生效）

<grand-son v-on="$listeners" />

下面继续使用 爷爷-> 父亲 -> 孙子 的栗子：

爷爷（GrandFather）给父亲（Father）绑定一个 click 事件

父亲通过点击 div 触发 click 事件，同时向孙子（GrandSon）传递 $listeners

<!-- GrandFather.vue -->
<template>
  <div>
    GrandFather:
    <father :msg1="msg1" :msg2="msg2" @click="handleClick" />
  </div>
</template>

<script>
import Father from './Father.vue'
export default {
  components: { Father },
  data() {
    return {
      msg1: 'msg1',
      msg2: 'msg2'
    }
  },
  methods: {
    handleClick() {
      console.log('trriger click')
    }
  }
}
</script>

<!-- Father.vue -->
<template>
  <div>
    <div @click="handleFatherClick">Father: {{ msg1 }}</div>
    <grand-son v-bind="$attrs" v-on="$listeners" />
  </div>
</template>

<script>
import GrandSon from './GrandSon.vue'
export default {
  components: { GrandSon },
  props: ['msg1'],
  methods: {
    handleFatherClick() {
      console.log('father click')
      this.$emit('click')
    }
  }
}
</script>

<!-- GrandSon.vue -->
<template>
  <div @click="handleSonClick">GrandSon: {{ msg1 }}{{ msg2 }}</div>
</template>

<script>
export default {
  props: ['msg1', 'msg2'],
  methods: {
    handleSonClick() {
      console.log('grandson click')
      this.$emit('click')
    }
  }
}
</script>

界面：

GrandFather:
Father: msg1
GrandSon: msg2

点击 Father: msg1，控制台显示：

father click
trriger click

点击 GrandSon: msg2，控制台显示：

grandson click
trriger click

总结

到此这篇关于vue2.x的$attrs和$listeners的文章就介绍到这了,更多相关vue2.x $attrs和$listeners内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue2.0 中#$emit,$on的使用详解

    vue2.0 中#$emit,$on的使用详解

    这篇文章主要介绍了vue2.0 中#$emit,$on的使用详解,需要的朋友可以参考下
    2017-06-06
  • Vue分页组件实现过程详解

    Vue分页组件实现过程详解

    Web应用程序中资源分页不仅对性能很有帮助，而且从用户体验的角度来说也是非常有用的。在这篇文章中，将了解如何使用Vue创建动态和可用的分页组件
    2022-12-12
  • Vue Element使用icon图标教程详解(第三方)

    Vue Element使用icon图标教程详解(第三方)

    element-ui自带的图标库不够全，还是需要需要引入第三方icon。下面小编给大家带来了Vue Element使用icon图标教程，感兴趣的朋友一起看看吧
    2018-02-02
  • vue中el-checkbox全选、反选、多选的实现

    vue中el-checkbox全选、反选、多选的实现

    这篇文章主要介绍了vue中el-checkbox全选、反选、多选的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-05-05
  • 通过Element ui往页面上加一个分页导航条的方法

    通过Element ui往页面上加一个分页导航条的方法

    这篇文章主要介绍了通过Element ui往页面上加一个分页导航条的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • 浅析vue中$nextTick的作用与原理

    浅析vue中$nextTick的作用与原理

    这篇文章主要为大家详细介绍一下Vue中$nextTick的作用于原理,这也是面试中常常考到的问题,文中的示例代码讲解详细,对我们深入了解Vue有一定的帮助,需要的小伙伴可以参考一下
    2023-10-10
  • Vue路由切换页面不更新问题解决方案

    Vue路由切换页面不更新问题解决方案

    这篇文章主要介绍了Vue路由切换页面不更新问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • vue+flv.js+SpringBoot+websocket实现视频监控与回放功能

    vue+flv.js+SpringBoot+websocket实现视频监控与回放功能

    vue+springboot的项目,需要在页面展示出海康的硬盘录像机连接的摄像头的实时监控画面以及回放功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
    2022-02-02
  • vue实现弹窗翻页多选效果

    vue实现弹窗翻页多选效果

    这篇文章主要为大家详细介绍了vue实现弹窗翻页多选效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08
  • vue3如何使用provide实现状态管理详解

    vue3如何使用provide实现状态管理详解

    Vue3中有一对新增的api，provide和inject,熟悉Vue2的朋友应该明,这篇文章主要给大家介绍了关于vue3如何使用provide实现状态管理的相关资料,需要的朋友可以参考下
    2021-10-10

最新评论