• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
玲嘉婕嘉n 显示全部楼层 发表于 2022-1-8 03:39:38 |阅读模式 打印 上一主题 下一主题
目录


  • 配景
  • 一、文档形貌
  • 二、具体利用
  • 三、总结

配景

如今我们来讨论一种情况,父组件与孙子组件怎么通信,我们有多少种办理方案?

  • 我们利用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>
  2.   <div>
  3.     <div>父亲组件</div>
  4.     <Child
  5.       :foo="foo"
  6.       :zoo="zoo"
  7.       @handle="handleFun"
  8.     >
  9.     </Child>
  10.   </div>
  11. </template>
  12. <script>
  13. import Child from './Child.vue'
  14. export default {
  15.   components: { Child },
  16.   data() {
  17.     return {
  18.       foo: 'foo',
  19.       zoo: 'zoo'
  20.     }
  21.   },
  22.   methods: {
  23.     // 传递事件
  24.     handleFun(value) {
  25.       this.zoo = value
  26.       console.log('孙子组件发生了点击事件,我收到了')
  27.     }
  28.   }
  29. }
  30. </script>
复制代码
2. 儿子组件(Child.vue)
中心层,作为父组件和孙子组件的传递中介,在儿子组件中给孙子组件添加
  1. v-bind="$attrs"
复制代码
,如许孙子组件才气接收到数据。
  1. $attrs是从父组件传过来的,且儿子组件未通过props接收的数据,例如zoo
复制代码
  1. <template>
  2.   <div class='child-view'>
  3.     <p>儿子组件--{{$props.foo}}与{{foo}}内容一样</p>
  4.     <GrandChild v-bind="$attrs" v-on="$listeners"></GrandChild>
  5.   </div>
  6. </template>
  7. <script>
  8. import GrandChild from './GrandChild.vue'
  9. export default {
  10.   // 继承所有父组件的内容
  11.   inheritAttrs: true,
  12.   components: { GrandChild },
  13.   props: ['foo'],
  14.   data() {
  15.     return {
  16.     }
  17.   }
  18. }
  19. </script>
复制代码
3. 孙子组件(GrandChild.vue)
在孙子组件中肯定要利用props接收从父组件传递过来的数据
  1. <template>
  2.   <div class='grand-child-view'>
  3.     <p>孙子组件</p>
  4.     <p>传给孙子组件的数据:{{zoo}}</p>
  5.     <button @click="testFun">点我触发事件</button>
  6.   </div>
  7. </template>
  8. <script>
  9. export default {
  10.   // 不想继承所有父组件的内容,同时也不在组件根元素dom上显示属性
  11.   inheritAttrs: false,
  12.   // 在本组件中需要接收从父组件传递过来的数据,注意props里的参数名称不能改变,必须和父组件传递过来的是一样的
  13.   props: ['zoo'],
  14.   methods: {
  15.     testFun() {
  16.       this.$emit('handle', '123')
  17.     }
  18.   }
  19. }
  20. </script>
复制代码
三、总结

从上面的代码,可以看出利用attrsinheritAttrs属性 可以或许利用简洁的代码,将A组件的数据传递给C组件,该场景的利用范围还是挺广的。
通过listeners,我们在b组件上 绑定 v-on=”$listeners”, 在a组件中,监听c组件触发的变乱。就能把c组件发出的数据,传递给a组件。
到此这篇关于详解Vue中$props、$attrs和$listeners的利用方法的文章就先容到这了,更多相干Vue $props、$attrs和$listeners内容请搜索草根技能分享从前的文章或继续欣赏下面的相干文章希望各人以后多多支持草根技能分享!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作