罗田县升平网络工作室,一家专业从事网站建设的工作室

罗田县社区

 找回密码
 加入罗田县社区

QQ登录

只需一步,快速开始

快捷登录

回帖中禁止出现的内容,违者将被直接永久禁止访问,删除ID处理 :1.违反法律法规 ,包括但不限于出现带有政治、色情、暴恐信息等内容;2.恶意攻击内容,包括但不限于:恶意攻击党和政府、辱骂跟帖者、攻击主题发布者、不服从论坛管理、挑衅管理者、挑战版规等;3.广告、推广内容,尤其出现带有病毒、恶意代码、广告链接等内容,包括但不限于:QQ号、文字QQ号、微信号、手机号、文字手机号、第三方网址、单位公司名称、网站名称等;4.回帖贴出该主题隐藏资源链接或其它主题隐藏资源链接的行为。
查看: 427|回复: 0

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

[复制链接]

663

主题

670

帖子

800

积分

社区达人

积分
800
发表于 2022-1-11 17:26:58 来自手机 | 显示全部楼层 |阅读模式
目录


  • 背景
  • 一、文档描述
  • 二、具体使用
  • 三、总结

背景

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

  • 我们使用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、父组件
  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=&quot;$attrs&quot;,这样孙子组件才能接收到数据。
$attrs是从父组件传过来的,且儿子组件未通过props接收的数据,例如zoo
  1. <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接收从父组件传递过来的数据
  1. <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=&rdquo;$listeners&rdquo;, 在a组件中,监听c组件触发的事件。就能把c组件发出的数据,传递给a组件。
到此这篇关于详解Vue中$props、$attrs和$listeners的使用方法的文章就介绍到这了,更多相关Vue $props、$attrs和$listeners内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

来源:http://www.jb51.net/article/233469.htm
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
打赏鼓励一下!
*罗田县社区ltxbbs.cn 罗田人自己的社区!
回复

使用道具 举报

回帖中禁止出现的内容,违者将被直接永久禁止访问,删除ID处理 :1.违反法律法规 ,包括但不限于出现带有政治、色情、暴恐信息等内容;2.恶意攻击内容,包括但不限于:恶意攻击党和政府、辱骂跟帖者、攻击主题发布者、不服从论坛管理、挑衅管理者、挑战版规等;3.广告、推广内容,尤其出现带有病毒、恶意代码、广告链接等内容,包括但不限于:QQ号、文字QQ号、微信号、手机号、文字手机号、第三方网址、单位公司名称、网站名称等;4.回帖贴出该主题隐藏资源链接或其它主题隐藏资源链接的行为。

浏览排行

(36663)2019-11-5 公共云钱包资金盘骗局揭秘: 网络传销+原始股骗局合体!

(20853)2019-12-20 12月17日 邓智天法院直播庭审疑问全解答!

(19844)2019-12-1 环保币GEC资金盘骗局最新消息: 即将崩盘!

(14887)2018-12-24 罗田县人民法院公布【第五批失信被执行人名单】 ...

(14190)2019-11-3 曝光!PTFX已经崩盘跑路,投资者血流成河!

(13339)2019-11-9 巨胸肥臀大长腿,嫩模糯美子真人COS不知火舞福利污图

(11694)2019-8-7 湖北电力网上缴费,支付宝绑定户号的初始密码是什么?

(11344)2018-10-17 罗田县人民政府“12345”市民服务热线服务指南

(10131)2019-12-11 公安定性了, 趣码是非法传销! 趣码怎么退回365元?

(9969)2019-12-15 满足你对女同事的幻想 风骚秘书阿朱销魂眼神勾魂摄魄

最新发表

[无理取闹]2022-8-18 德媒述评:“屋顶”成中国光伏发展新蓝海

[开心每一天]2022-8-18 港媒:中国完善期货市场法律框架

[zhanwenfang]2022-8-18 港媒报道:中国多地出台政策鼓励生育

[jiantengxie]2022-8-18 现场视频!东部战区飞行员俯瞰澎湖列岛

[Mandy1008]2022-8-18 东部战区位台岛周边海空域组织多军兵种联合战备警巡和实战化演练

[ulteawx]2022-8-18 俄媒:俄吊销捷克和保加利亚企业军机维修许可证

[不要问我]2022-8-18 俄国防部:一架英国侦察机侵犯俄领空遭驱离

[曾磊]2022-8-18 俄媒:斯洛伐克向乌克兰提供多门自行榴弹炮

[不要问我]2022-8-18 外媒:新西兰将向英国派遣120名军事人员协助培训乌军人

[hylin]2022-8-18 法媒:以军空袭叙境内目标致多人死伤

QQ|Archiver|手机版|小黑屋|罗田县社区LTXBBS.CN ( 鄂ICP备18029072号-1 )|网站地图


手机扫一扫继续访问
[免责声明]
本站系本网编辑转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
如涉及作品内容、版权和其它问题,请在30日内与本网联系,我们将在第一时间删除内容!
[声明]本站文章版权归原作者所有 内容为作者个人观点 本站只提供参考并不构成任何投资及应用建议。

进入社区 | 发表新帖 | 百度收录 |
技术提供:罗田县升平网络工作室
站长Email:admin@ltxbbs.cn
投诉电话(刮开查看):15374567400

GMT+8, 2022-8-18 21:35 , Processed in 0.184014 second(s), 32 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表