vue插槽学习之——作用域插槽

注意:vue的组件化思想,我们在设计的时候,尽量把子组件纯粹化,不要跟业务扯上关系。

vue作用域插槽

关于插槽就是无非就是在子组件中挖个坑,坑里面放什么东西由父组件决定。而作用域插槽就是父组件可以直接拿到子组件的值,使用作用域插槽解决的问题不仅仅是可以在子组件中动态地放置一段html代码片段,而且还可以取到子组件中相应的一些值。

应用场景

自定义需求: 做一个list组件,里面有一个按钮(可能是按钮,也可以是其他东西,这个东西要可以定制化,所以不能写到组件内部),点击这个按钮时可以获取到当前的这一项的数据。如果不用插槽, 想不到该如何去开发这个list组件
如图,我定义了一个list组件

这个list组件中数据由父组件传入,在内部通过v-for渲染,每一项含有一个插槽

父组件:

提示:点击的事件testBtn是写在父组件里面,直接调用父组件的方法!!!!

传入testList到子组件中 通过template(2.5也可以直接用这个button了,不过template用着还是舒服些) 使用slot-scope属性与list组件中的插槽进行绑定。 而slot-scope的值为子组件传递过来的数据
先看下效果:

可以看到,父组件将数据传递给了子组件,而且插槽的模板也生效了。

现在点击测试按钮,应该有一个参数scope传入到testBtn中,结合子组件,这个scope应该是这个样子的:

 现在看打印效果

通过作用域插槽,可以很灵活的自定义一个list组件,并很轻松的在父组件中取到当前项的值。
 
以上参考:https://www.jianshu.com/p/c735cc612e63
作用域插槽用于三级以上嵌套组件  https://www.jianshu.com/p/e10baeff888d 
 
 
 
原文地址:https://www.cnblogs.com/qdlhj/p/14335343.html