Vue v2.4中新增的$attrs及$listeners属性使用教程


Posted in Javascript onJanuary 08, 2018

前言

多级组件嵌套需要传递数据时,通常使用的方法是通过vuex。如果仅仅是传递数据,而不做中间处理,使用 vuex 处理,未免有点杀鸡用牛刀。Vue 2.4 版本提供了另一种方法,使用 v-bind=”$attrs”, 将父组件中不被认为 props特性绑定的属性传入子组件中,通常配合 interitAttrs 选项一起使用。之所以要提到这两个属性,是因为两者的出现使得组件之间跨组件的通信在不依赖 vuex 和事件总线的情况下变得简洁,业务清晰。

首先分析以下应用场景:

Vue v2.4中新增的$attrs及$listeners属性使用教程

A 组件与 B 组件之间的通信: (父子组件)

如上图所示,A、B、C三个组件依次嵌套,按照 Vue 的开发习惯,父子组件通信可以通过以下方式实现:

  • A to B 通过props的方式向子组件传递,B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现
  • 通过设置全局Vuex共享状态,通过 computed 计算属性和 commit mutation的方式实现数据的获取和更新,以达到父子组件通信的目的。
  • Vue Event Bus,使用Vue的实例,实现事件的监听和发布,实现组件之间的传递。

往往数据在不需要全局的情况而仅仅是父子组件通信时,使用第一种方式即可满足。

A 组件与 C 组件之间的通信: (跨多级的组件嵌套关系)

如上图,A 组件与 C 组件之间属于跨多级的组件嵌套关系,以往两者之间如需实现通信,往往通过以下方式实现:

  • 借助 B 组件的中转,从上到下props依次传递,从下至上,$emit事件的传递,达到跨级组件通信的效果
  • 借助Vuex的全局状态共享
  • Vue Event Bus,使用Vue的实例,实现事件的监听和发布,实现组件之间的传递。

很显然,第一种通过props和$emit的方式,使得组件之间的业务逻辑臃肿不堪,B组件在其中仅仅充当的是一个中转站的作用。如使用第二种 Vuex的方式,某些情况下似乎又有点大材小用的意味,(仅仅是想实现组件之间的一个数据传递,并非数据共享的概念)。第三种情况的使用在实际的项目操作中发现,如不能实现很好的事件监听与发布的管理,往往容易导致数据流的混乱,在多人协作的项目中,不利于项目的维护。

$attrs以及$listeners的出现解决的就是第一种情况的问题,B 组件在其中传递props以及事件的过程中,不必在写多余的代码,仅仅是将$attrs以及$listeners向上或者向下传递即可。

示例代码

如下所示:

A组件(App.vue)

<template>
 <div id="app">
 <child1
 :p-child1="child1"
 :p-child2="child2"
 v-on:test1="onTest1" //此处监听了两个事件,可以在B组件或者C组件中直接触发
 v-on:test2="onTest2"> 
 </child1>
 </div>
</template>
<script>
 import Child1 from './Child1.vue';
 export default {
 data () {
 return {};
 },
 components: { Child1 },
 methods: {
 onTest1 () {
 console.log('test1 running...');
 },
 onTest2 () {
 console.log('test2 running');
 }
 }
 };
</script>

B组件(Child1.vue)

<template>
 <div class="child-1">
 <p>in child1:</p>
 <p>props: {{pChild1}}</p>
 <p>$attrs: {{$attrs}}</p>
 <hr>
 <!-- C组件中能直接触发test的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 -->
 <!-- 通过v-bind 绑定$attrs属性,C组件可以直接获取到A组件中传递下来的props(除了B组件中props声明的) -->
 <child2 v-bind="$attrs" v-on="$listeners"></child2>
 </div>
</template>
<script>
 import Child2 from './Child2.vue';
 export default {
 props: ['pChild1'],
 data () {
 return {};
 },
 inheritAttrs: false,
 components: { Child2 },
 mounted () {
 this.$emit('test1');
 }
 };
</script>

结果:

in child1:

props: v_child1

$attrs: { “p-child2”: “v_child2”}

C 组件 (Child2.vue)

<template>
 <div class="child-2">
 <p>in child2:</p>
 <p>props: {{pChild2}}</p>
 <p>$attrs: {{$attrs}}</p>
 <hr>
 </div>
</template>
<script>
 export default {
 props: ['pChild2'],
 data () {
 return {};
 },
 inheritAttrs: false,
 mounted () {
 this.$emit('test2');
 }
 };
</script>

结果:

in child2:

props: v_child2

$attrs: {}

知识点总结

$attrs

 包含了父作用域中不被认为 (且不预期为) props 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 props 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind=”$attrs” 传入内部组件——在创建更高层次的组件时非常有用。

$listeners

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=”$listeners” 传入内部组件——在创建更高层次的组件时非常有用。

inheritAttrs

默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时,这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false,这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例属性 $attrs 可以让这些特性生效,且可以通过 v-bind 显性的绑定到非根元素上。

上述特性的使用完全可以降低在不使用Vuex以及事件总线的情况下,组件跨级props以及事件传递的复杂度。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
网页的标准,IMG不支持onload标签怎么办
Jun 29 Javascript
JS解析XML的实现代码
Nov 12 Javascript
Js获取事件对象代码
Aug 05 Javascript
JS声明变量背后的编译原理剖析
Dec 28 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 Javascript
vue.js利用Object.defineProperty实现双向绑定
Mar 09 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
Ionic3实现图片瀑布流布局
Aug 09 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 Javascript
js前端如何写一个精确的倒计时代码
Oct 25 Javascript
实例解析ES6 Proxy使用场景介绍
Jan 08 #Javascript
详解weex默认webpack.config.js改造
Jan 08 #Javascript
关于vue单文件中引用路径的处理方法
Jan 08 #Javascript
浅谈React Native Flexbox布局(小结)
Jan 08 #Javascript
Node.js使用Koa搭建 基础项目
Jan 08 #Javascript
JavaScript体验异步更好的解决办法
Jan 08 #Javascript
探索Vue高阶组件的使用
Jan 08 #Javascript
You might like
一个比较简单的PHP 分页分组类
2009/12/10 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
JavaScript实现隐藏省略文字效果的方法
2017/04/27 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
2019/09/24 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
python查找指定具有相同内容文件的方法
2015/06/28 Python
Python实现邮件的批量发送的示例代码
2018/01/23 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
Django结合ajax进行页面实时更新的例子
2019/08/12 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
CSS3 分类菜单效果
2019/05/27 HTML / CSS
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
旷课检讨书2000字
2014/01/14 职场文书
《灯光》教学反思
2014/02/08 职场文书
2014元旦晚会策划方案
2014/02/19 职场文书
小学教师培训方案
2014/06/09 职场文书
房产转让协议书(2014版)
2014/09/30 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
三严三实·严以用权心得体会
2016/01/12 职场文书
解决golang在import自己的包报错的问题
2021/04/29 Golang
Mysql官方性能测试工具mysqlslap的使用简介
2021/05/21 MySQL
Win10系统下配置Java环境变量
2021/06/13 Java/Android