vue3_作用域插槽

讲解作用域插槽

作用域插槽

可以传递数据的插槽，就是叫做作用域插槽；

子组件可以将数据，回传，给父组件；

父组件可以决定，这些回传的数据，以何种结构和外观，在子组件内部展示；

案例准备

这是子组件；

这是父组件；

在父组件当中制造数据；

引导线

将父组件当中的todos传递给子组件，然后在子组件当中用列表来展示出来；

这是父组件；给子组件传递了数据；

子组件当中使用defineProps来接收父亲传递过来的数据；

从这张图可以看到，确实是接收到了父亲传递过来的数据；

引导线

子组件接收到了父组件的数据，那么我想要让子组件将这些数据，用列表的方式展示出来；

如果这些待办是做了，那么文字颜色就是绿色的；

如果这些待办是没有做的，那么文字颜色就是红色的；

数据先列表展示出来；

这是展示出来的效果；

具体的效果就是如上所示的；

作用域插槽

作用域插槽的意思，就是可以把数据回传给父组件

<ul>
    <li v-for="(item, index) in todos" :key="item.id">
    	<slot :$row="item"></slot>
    </li>
</ul>

上面的代码中，:$row这个可不是props，这是作用域插槽的语法；

子组件通过作用域插槽，给父组件回传了数据；

那么父组件要接收这些数据；

那么父组件用todo这个变量接收，用template、v-slot；

接收后打印效果如上；

回传的数据整体是一个对象；

这个key就是回传的属性的名字，右侧就是回传的数据对象；

同样是可以达成之前的效果；

分析

子组件返回数据后，父组件让你用什么结构展示，你就是什么结构展示；

外观也是父组件决定的；

为什么要讲解作用域插槽呢？

因为我们要开发的项目当中，将会用到element-plus里面的ui组件；

经常会用到作用域插槽。

总结

vue3的组件通信手段包括有：

• props
• custom event
• event bus
• v-model
• useAttrs
• ref$parent
• provide-inject
• pinia
• slot