首页 前端知识 vue中 v-bind=“$props“和v-bind=“$attrs“的理解和使用方式

vue中 v-bind=“$props“和v-bind=“$attrs“的理解和使用方式

2024-04-01 10:04:30 前端知识 前端哥 744 713 我要收藏

目录

一、v-bind=“$attrs“

二、v-bind="$props"

三、总结


一、v-bind=“$attrs“

主要用于组件之间的隔代传值。 在一个组件里,this.$attr传递当前组件身上绑定的所有属性(不考虑声明了组件内prop的话)

这么说是不是稍微有点绕?让我们看看例子。

// GrandFather.vue    祖父组件
<template>
   <div>
      <father-page :name="testName" :data-name="dataName" />
    </div>
</template>
<script>
    ...
    testName = 'Test101';
    ...
    dataName = 'dataName'
</script>
// FatherPage.vue    父组件
<template>
  <div>
    <child-page v-bind="$attrs" />
  </div>
</template>
<script>
    // 不声明props(不接收祖父组件传过来的数据)
</script>

这时候ChildPage.vue和FatherPage.vue 组件内的 this.$attrs

如果我们修改一下 FatherPage.vue 组件

// FatherPage.vue    父组件
<template>
  <div>
    <child-page v-bind="$attrs" />
  </div>
</template>
<script>
    ...
    props:['testName']
</script>

 

可以看见FatherPage.vue的 this.$attrs 属性里少了testName,而props多了testName

ChildPage.vue接收到的this.$attrs也只有dataName了。

如果使用的是 v-bind="$props" 呢?咱们继续往下看


二、v-bind="$props"

将父组件的所有props下发给它的子组件,子组件需要在其props:{} 中定义要接受的props。

如果将父组件传递给子组件的方式改为

        <grand-son v-bind="$props"></grand-son>

如果在 FatherPage.vue 的props中接收的是testName,那么通过v-bind="$props" 传递给ChildPage.vue 的 this.$attrs 就是testName,如果在 FatherPage.vue中没有声明props,那么在ChildPage.vue 中的this.$attrs 就是空

                        


三、总结

        v-bind="$props"和v-bind="$attrs" 其实就是往子组件里传的参数不同,一个传的是vm.props一个传的是vm.attrs。而组件的attrs其实就是除了本组件声明的prop属性之外的其他绑定在本组件上的属性(可以是vue的动态绑定属性或者name type这些原生/自定义属性)

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4373.html
标签
评论
发布的文章

前端vue实现甘特图

2024-04-19 21:04:35

HTML入门(详细)

2024-04-19 21:04:24

HTML 入门手册(一)

2024-04-19 21:04:58

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!