slot 用法以及使用场景

Vue的插槽slot，分为3种

匿名插槽

具名插槽

作用域插槽

前两种很好理解，无非就是子组件里定义一个slot占位符，父组件调用时，在slot对应的位置填充模板就好了。

有的时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽。

我们知道如果一个组件的内容是固定的，那么你可以直接把组件引入使用即可。下面问题来了，

现在我们手里有一个todolist组件，他的功能是渲染一个数组，当别人使用你这个todolist组件的时候有时候只需要渲染，但实际开发中大部分还会进行一些逻辑判断，这时候你需要把子组件中的内容传递给父组件，这个时候就需要用到slot-scope 

slot-scope是什么？就是把子组件的数据传递给父组件的一种方式，

子组件

父组件，将数据保存在slotProps里面，下面就可以拿到子组件中的数据了