详解Vue中$props、$attrs和$listeners的使用方法


Posted in Vue.js onFebruary 18, 2022

背景

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

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

一、文档描述

(1)$props:当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。

(2)$attrs:包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。

(3)$listeners:包含了父作用域中(不含 .native 修饰器的)v-on事件监听器。他可以通过 v-on="listeners"传入内部组件

二、具体使用

1、父组件

<template>
  <div>
    <div>父亲组件</div>
    <Child
      :foo="foo"
      :zoo="zoo"
      @handle="handleFun"
    >
    </Child>
  </div>
</template>

<script>
import Child from './Child.vue'
export default {
  components: { Child },
  data() {
    return {
      foo: 'foo',
      zoo: 'zoo'
    }
  },
  methods: {
    // 传递事件
    handleFun(value) {
      this.zoo = value
      console.log('孙子组件发生了点击事件,我收到了')
    }
  }
}
</script>

2. 儿子组件(Child.vue)

中间层,作为父组件和孙子组件的传递中介,在儿子组件中给孙子组件添加v-bind="$attrs",这样孙子组件才能接收到数据。

$attrs是从父组件传过来的,且儿子组件未通过props接收的数据,例如zoo

<template>
  <div class='child-view'>
    <p>儿子组件--{{$props.foo}}与{{foo}}内容一样</p>
    <GrandChild v-bind="$attrs" v-on="$listeners"></GrandChild>
  </div>
</template>

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

3. 孙子组件(GrandChild.vue)

在孙子组件中一定要使用props接收从父组件传递过来的数据

<template>
  <div class='grand-child-view'>
    <p>孙子组件</p>
    <p>传给孙子组件的数据:{{zoo}}</p>
    <button @click="testFun">点我触发事件</button>
  </div>
</template>

<script>
export default {
  // 不想继承所有父组件的内容,同时也不在组件根元素dom上显示属性
  inheritAttrs: false,
  // 在本组件中需要接收从父组件传递过来的数据,注意props里的参数名称不能改变,必须和父组件传递过来的是一样的
  props: ['zoo'],
  methods: {
    testFun() {
      this.$emit('handle', '123')
    }
  }
}
</script>

三、总结

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

通过listeners,我们在b组件上 绑定 v-on=”$listeners”, 在a组件中,监听c组件触发的事件。就能把c组件发出的数据,传递给a组件。

到此这篇关于详解Vue中$props、$attrs和$listeners的使用方法的文章就介绍到这了,更多相关Vue $props、$attrs和$listeners内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
Vue实现圆环进度条的示例
Feb 06 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
vue常用高阶函数及综合实例
Feb 25 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
前端vue+express实现文件的上传下载示例
一篇文章告诉你如何实现Vue前端分页和后端分页
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 #Vue.js
vue3获取当前路由地址
Feb 18 #Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 #Vue.js
vue项目支付功能代码详解
Feb 18 #Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 #Vue.js
You might like
PHP将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
第三章 php操作符与控制结构代码
2011/12/30 PHP
php Hex RGB颜色值互换的使用
2013/05/10 PHP
win7下memCache的安装过程(具体操作步骤)
2013/06/28 PHP
在网页里看flash的trace数据的js类
2009/01/10 Javascript
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
原生js实现给指定元素的后面追加内容
2013/04/10 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
python 对xml解析的示例
2021/02/27 Python
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
销售找工作求职信
2013/12/20 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
假期安全教育广播稿
2014/10/04 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
聚会通知怎么写
2015/04/23 职场文书
地道战观后感400字
2015/06/04 职场文书
观后感开头
2015/06/19 职场文书
2016年母亲节广告语
2016/01/28 职场文书
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL