透传的概念

说明

指的是父组件传递给子组件的属性，在子组件中并没有通过props或emits声明或者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对象获取到除了props和emits外的所有属性，如： 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>