详解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实现坐标拾取器功能示例
Nov 18 Vue.js
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
vuex的使用步骤
Jan 06 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
vue实现可移动的悬浮按钮
Mar 04 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
如何使用vue3打造一个物料库
May 08 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
vue postcss-px2rem 自适应布局
May 15 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下通过系统信号量加锁方式获取递增序列ID
2009/09/25 PHP
php date()日期时间函数详解
2010/05/16 PHP
PHP 设置MySQL连接字符集的方法
2011/01/02 PHP
php导出生成word的方法
2015/12/25 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
Docker 安装 PHP并与Nginx的部署实例讲解
2021/02/27 PHP
jQuery 改变CSS样式基础代码
2010/02/11 Javascript
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
2017/03/20 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
初步认识Python中的列表与位运算符
2015/10/12 Python
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
详解python tkinter模块安装过程
2020/01/06 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
大学毕业生个人自荐书
2014/07/02 职场文书
捐资助学感谢信
2015/01/21 职场文书
教师反邪教心得体会
2016/01/15 职场文书
小学数学教学反思范文
2016/02/16 职场文书
Go 在 MongoDB 中常用查询与修改的操作
2021/05/07 Golang
python装饰器代码解析
2022/03/23 Python
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers