vue 插槽传值（vue的插槽有几种方式）

科技前沿 • 2025-06-08 11:32 • 阅读 40

大家好，我是讯享网，很高兴认识大家。

Vue 组件的使用不管是在平常工作还是在面试面试中，都是频繁出现的。因此系统的梳理一下组件之间的传参还是非常有必要的

第三种对象默认支持 4 种属性，并且都是非必填的。可以随意使用

第一种静态属性传参

注意：

讯享网

第二种动态属性传参

注意：

$attrs

$attrs 会获取到 props 中未定义的属性（class 和 style 属性除外）,支持响应式。常用的场景有俩种：

组件嵌套组件时可以使用 $attrs 来支持过多的属性支持。比如 elementUI 的 table 组件。支持的属性十几个，而平常封装的时候用的最多的也就一俩个。
属性默认是添加在父组件上的，有时候想把多余的属性添加在子组件上（可以结合 inheritAttrs: false 属性，让父属性不接受多余的属性）

$listeners 定义的事件都在子组件的根元素上，有时候想加到其他元素上。就可以使用 $listerners。它包含了父组件中的事件监听器(除了带有 .native 修饰符的监听器)

Vue 默认有 $on $emit $once $off 几种方法来实现发布订阅模式，这也应用在了组件传参上。在组件上添加的特殊方法 @abc=“methods” 就相当于使用了 $on 来监听这个方法。因此组件内可以使用 $emit 来进行通知。

这里有一道考题: for 循环的时候如何拿到子组件的传值和 for 中循环的值

答案有俩种，一是 $event, 二是闭包。只是需要注意 $event 只能获取到第一个值

讯享网

这个其实是一种通过 emit， on 的组合方式。优点再于同步值方便,写法优雅。下面三种写法其实是一个意思

讯享网

注意：注入的值是非响应的

这个相当于单独维护的一组数据，就不过多的说了。