编辑
2023-04-08
VUE3
0
请注意,本文编写于 574 天前,最后修改于 527 天前,其中某些信息可能已经过时。

目录

透传的概念
说明
常见的透传
EG
阻止透传
说明
EG
手动指定
说明
EG
在单文件组件中获取

透传的概念

说明

指的是父组件传递给子组件的属性,在子组件中并没有通过propsemits声明或者v-on绑定的事件

常见的透传

  • class
  • style
  • @[FnName]

EG

  • Vue中
vue
<script setup lang="ts"> import AboutView from './views/AboutView.vue'; </script> <template> <AboutView class="aboutByFather" :style="{'width':'100%'}"/> </template>
  • 实际DOM渲染
html
<div id="app" data-v-app=""> <div data-v-7a7a37b1="" class="About aboutByFather" style="width: 100%"> ... </div> </div>

阻止透传

说明

通过创建单独的script块并默认导出inheritAttrs:false实现禁用透传

  • 报错情况:
ts
Internal server error: [@vue/compiler-sfc] <script> and <script setup> must have the same language type.
  • 解决方案: 需要保持新增块的lang语言和最开始的一致

EG

  • Vue中
vue
<template> <div class="About"> ... </div> </template> <script setup lang="ts"> ... </script> <script lang="ts"> export default { inheritAttrs: false } </script>
  • 实际DOM渲染,此时并不会发生透传
html
<div id="app" data-v-app=""> <div data-v-7a7a37b1="" class="About"> ... <div> </div>

手动指定

说明

在阻止透传的基础上,可以通过$attrs对象获取到除了propsemits外的所有属性,如: Class、style和v-on绑定的事件

EG

  • Vue中
vue
<template> <div class="About"> <div v-bind="$attrs"> <input type="text" v-model="name" /> <p>{{ name }}</p> </div> </div> </template> <script setup lang="ts"> ... </script> <script lang="ts"> // 使用普通的 <script> 来声明选项 export default { inheritAttrs: false } </script>
  • 实际DOM渲染
html
<div id="app" data-v-app=""> <div data-v-7a7a37b1="" class="About"> <div class="aboutByFather" style="width: 100%;"> ... </div> </div> </div>

在单文件组件中获取

通过useAttrs获取,获取的是最新的,但是出于性能考虑这个对象并不是响应式对象。如果需要保持响应式,则需要使用props或在onUpdated()中每次重新获取

vue
... <script setup lang="ts"> import { useAttrs } from 'vue' const attrs = useAttrs() </script>

本文作者:RKLS

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!