全网最通俗易懂的vue透传-编程知识

概念：

Vue的透传是指在Vue组件中，使用特定的语法将父组件传递的属性或事件直接传递给子组件，实现了通过父组件传递数据或事件，再传递给子组件的功能。（传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 class、style 和 id。）

在vue2中，透传可以通过v-bind="$attrs"和v-on="$listeners"指令来实现。v-bind指令可以将父组件的属性直接绑定到子组件上，而v-on指令可以将父组件的事件直接绑定到子组件上。

而vue3中,将v-bind和v-on进行了合并，我们只需要v-bind="$attrs"这一个指令就能把父组件的属性和方法都绑定到子组件上。

作用：透传能给我们组件复用或者二次封装第三方库带来极大的便捷。

下面让我们来看看vue3和vue2的透传的实际用法吧：

Vue3：

如何使用透传

父组件：直接传属性和方法

<template><div><ChildComponent name="John Doe" age="25" @handleData="handleData"/></div>
</template><script setup>
import ChildComponent from './ChildComponent.vue';const handleData = () => {// ...逻辑
}
</script>

子组件：使用 $attrs 或 useAttrs() 接收属性和方法

<template><div><!-- 在模板的表达式中直接用 $attrs 访问到 --><p>{{ $attrs.name }}</p><!-- 也可以用 useAttrs() 访问到 --><p>{{ attrs.age }}</p><button @click="$attrs.handleData">按钮1</button><button @click="onChange">按钮2</button></div>
</template><script setup>// 在js里 使用 useAttrs() API 来访问到import { useAttrs } from 'vue'const attrs = useAttrs()console.log(attrs)const onChange = () => {attrs.handleData()}
</script>

透传注意点

当一个组件以单个元素为根作渲染时，透传的 attribute 会自动被添加到根元素上。多个根节点的组件没有自动 attribute 透传行为。如果 $attrs 没有被显式绑定，或者没有被使用，将会抛出一个运行时警告。

把上面的子组件改一下，多一个div根节点：

下面是被透传的子组件

<template><div><h2>{{ name }}</h2></div>// 多了一个根节点（Vue3是支持多个根节点的）<div></div>
</template><script setup>defineProps({name: String})
</script>

此时报错表示：vue不知道要将 attribute 透传到哪里。

解决办法：如果 $attrs 被显式绑定或者使用，或者两者同时出现，则不会有警告。

下面是解决后的代码：

<template><!-- 显示绑定 --><div v-bind="$attrs"><h2>{{ name }}</h2></div><div><!-- 使用 --><p>{{ $attrs.age }}</p></div>
</template><script setup>defineProps({name: String})
</script>

$attrs和显示绑定都能访问到属性和方法，但是它们的有些使用场景还是略有不同的，下面举个简单的栗子

修改一下父组件，添加一个id属性，子组件不变：

<template><div><ChildComponent id="custom-layout" name="John Doe" :age="25" /></div>
</template><script setup>import ChildComponent from './ChildComponent.vue'
</script>

这里可以看到的是，父组件传递下来的id属性，自动添加到了使用 v-bind 显示绑定的元素上了。而没有显示绑定的元素，是不会获得透传过来的id的

关闭透传

我们在使用vue2的透传的时候，可以设置inheritAttrs这个属性为false，来禁用透传，那么在Vue3中我们如何禁用透传呢？

其实从 3.3 开始我们就可以直接在 <script setup> 中使用 defineOptions来禁用透传。

我们需要明白，禁用透传只是禁用了自动透传，我们仍然可以通过显式$attrs访问到透传的属性和方法

<script setup>
defineOptions({inheritAttrs: false
})
// ...setup 逻辑
</script>

Vue2

vue2版本里，透传的属性可以使用this.$attrs获取到。在父级给组件绑定的事件可以用this.$listeners获取到。但是在vue3版本中，父组件透传来的属性都放在了$attrs里面，使用useAttrs()可以获取所有透传的属性和方法。

如何使用透传

$attrs：包含父作用域里除 class 和 style 除外的非 props 属性集合。通过 this.$attrs 获取父作用域中所有符合条件的属性集合，然后还要继续传给子组件内部的其他组件，就可以通过 v-bind="$attrs"

$listeners：包含父作用域里 .native 除外的监听事件集合。如果还要继续传给子组件内部的其他组件，就可以通过 v-on="$linteners"

// Parent.vue
<template><Child :name="name" age="28" @output='handlePrint'></Child>
</template
import Child from './child.vue'
export default{data(){return {name:"独求求败"}},components:{Child,},methods:{handlePrint(){console.log('name',this.name)}}
}

// Child.vue
<template>// 继续传给孙子组件<sun-child v-bind="$attrs" @bind="$linteners"></sun-child>
</template>
import SunChild from './SunChild.vue'
export default{components:{SunChild,},mounted(){console.log(this.$attrs)//{ name:"独求求败", age:28 }},
}

// sun-child.vue
<template>// 孙子组件<button @click="onClick">打印</button>//<button @click="$linteners.output">打印</button>  也可以直接调用父组件方法
</template>
export default{methods:{onClick(){this.$listeners.output()}}
}

vue2关闭透传

为了关闭透传，你可以在子组件中设置inheritAttrs:false

 <script>export default {inheritAttrs: false, // 禁用data(){return { ... }},methods:{ ... }};</script>