vue3中的useAttrs和props的区别解析

vue3中的useAttrs和props的区别

在vue3中， 提供了一个 useAttrs 的方法它接收到的参数一 prop中可以接收到的数据是基本一样的如果我们想自已写一个组件， 把 elementPlus 中的期中一个组件封装一下。可以这样做

1.新建一个 自定义组件 myBtnCom

<template>
  <div class="mybuttonwrapper">
    <el-button :="$attrs">Success</el-button>
  </div>
</template>
<script setup>
</script>

从上面的代码中， 我们可以在代码中直接使用 $attrs 来接收所有的属性也可以使用 useAttrs 函数import { useAttrs } from “vue”;let $attrs = useAttrs();

父组件中

<template>
  <div class="home-wrapper">Home</div>
  <el-button type="success" color="hotpink"  round @click="changeSuccess">{{suctext}}</el-button>
  <myBtnCom  type="success" color="hotpink" round></myBtnCom>
</template>

在myBtnCom 设置的属性和 elementPlus中的button的属性是一样的， 传到组件内部 ，就可以封装一个和 elementPlus 用法一样的组件了注意： 我们可以使用 useAttrs 接收到组件中传递的属性， 同样我们也可以使用 defineProps来接收， 但是如果我们使用 defineProps 接收过的属性， 会要useAttrs 中消失， 这个特性要注意一下

补充：vue props和attrs

vue3

props 要先声明才能取值，attrs不用声明直接使用（$attrs 包含 class and style attribute）

props 不包含事件，attrs包含

props 支持 String 以外的类型，attrs只有 String 类型

props 没有声明的属性，会在 attrs 里，若在 props 内声明了该属性，那么 attrs 里就不会出现该属性

vue2与vue3的不同

包含所有父作用域的绑定 (class 和 style 除外)

props 不包含事件，attrs也不包含，事件通过$listeners监听

补充：

vue2官方

$attrs:

包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

$listeners

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

vue3

$listeners 被移除或整合到 $attrs

$attrs 现在包含 class and style attribute

到此这篇关于vue3中的useAttrs和props的区别的文章就介绍到这了,更多相关vue3 useAttrs和props区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！