vue3中$attrs与inheritAttrs的使用

Vue 3 引入了一些新特性和改进,其中之一就是对 $attrs 的处理方式。在 Vue 2 中,$attrs 包含了父组件传递给子组件的属性,但不包括子组件已经声明的 props。在 Vue 3 中,$attrs 的行为有所变化:

  1. 默认情况下,$attrs 包含所有未被子组件的 props 声明的属性 。也就是说,如果父组件传递了多个属性给子组件,即使子组件只声明了其中的一部分作为 props,$attrs 也会包含所有未声明的属性。
javascript 复制代码
<!-- 父组件 -->
<template>
  <MyComponent custom-prop="value" other-attr="otherValue" />
</template>
javascript 复制代码
<!-- 子组件 -->
<template>
  <div>Custom prop: {{ customProp }}</div>
  <!-- $attrs 包含 other-attr="otherValue" -->
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  customProp: String
});
</script>
  1. vue3中 $attrs 包含了事件监听器 。在 Vue 2 中,事件监听器不会包含在 $attrs 中。但在 Vue 3 中,如果父组件传递了事件监听器给子组件,这些监听器也会包含在 $attrs 中。
javascript 复制代码
<!-- 父组件 -->
<template>
  <MyComponent @custom-event="handleCustomEvent" />
</template>

<script setup>
const handleCustomEvent() {
    console.log('Custom event triggered');
} 
</script>
javascript 复制代码
<!-- 子组件 -->
<template>
  <button @click="$attrs.onClick">Trigger Event</button>
  <!-- $attrs 包含 @custom-event="handleCustomEvent" -->
</template>

<script setup>
import { useAttrs } from 'vue';

const attrs = useAttrs();
</script>
  1. vue3中 $attrs 是一个响应式对象 。在 Vue 2 中,$attrs 是一个静态对象,不会随着父组件属性的变化而更新。但在 Vue 3 中,$attrs 是响应式的,如果父组件的属性发生变化,$attrs 也会相应地更新。
javascript 复制代码
<!-- 父组件 -->
<template>
  <div>
    <button @click="toggleAttr">Toggle attr</button>
    <MyComponent :dynamic-attr="dynamicAttr" />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const dynamicAttr = ref('initial');

function toggleAttr() {
  dynamicAttr.value = dynamicAttr.value === 'initial' ? 'updated' : 'initial';
}
</script>
javascript 复制代码
<!-- 子组件 -->
<template>
  <div>Dynamic attr: {{ attrs.dynamicAttr }}</div>
</template>

<script setup>
import { useAttrs } from 'vue';

const attrs = useAttrs();
</script>
  1. vue3中 $listeners 已被删除合并到$attrs 。在 Vue 2 中,$listeners 包含了父组件传递给子组件的所有事件监听器。但在 Vue 3 中,$listeners 被移除,所有的属性和事件监听器都包含在 $attrs 中。
javascript 复制代码
<!-- 子组件 -->
<template>
  <button v-on="attrs">Click me</button>
  <!-- 所有事件监听器都会应用到这个按钮上 -->
</template>

<script setup>
import { useAttrs } from 'vue';

const attrs = useAttrs();
</script>
  1. inheritAttrs 选项 。在 Vue 2 中,inheritAttrs 是一个布尔值,用于控制是否将 $attrs 中的属性自动应用到子组件的根元素上。在 Vue 3 中,inheritAttrs 仍然是一个选项,但它现在默认为 false,这意味着属性不会自动应用,除非你明确地使用它们。
javascript 复制代码
<!-- 子组件 -->
<template>
  <div v-bind="$attrs">
    <!-- 属性将应用到这个div上 -->
  </div>
</template>

<script setup>
import { defineProps, withDefaults } from 'vue';

const props = withDefaults(defineProps({}), {});
</script>
  1. v-on="$attrs" 用法 。在 Vue 3 中,你可以使用 v-on="$attrs" 将所有的事件监听器应用到一个元素上。
javascript 复制代码
<!-- 子组件 -->
<template>
  <button v-on="$attrs">Click me</button>
  <!-- 所有事件监听器都会应用到这个按钮上 -->
</template>

<script setup>
// 无需额外的脚本,直接使用$attrs即可
</script>
相关推荐
风无雨8 分钟前
GO启动一个视频下载接口 前端可以边下边放
前端·golang·音视频
Rainbow_Pearl13 分钟前
Vue2_element 表头查询功能
javascript·vue.js·elementui
aha-凯心1 小时前
前端学习 vben 之 axios interceptors
前端·学习
熊出没1 小时前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN1 小时前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
此乃大忽悠1 小时前
XSS(ctfshow)
javascript·web安全·xss·ctfshow
用户99045017780091 小时前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家1 小时前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞2 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆2 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js