全网最通俗易懂的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="$listeners"

// 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="$listeners"></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="$listeners.output">打印</button>  也可以直接调用父组件方法
</template>
export default{
    methods:{
        onClick(){
            this.$listeners.output()
        }
    }
}

vue2关闭透传

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

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