vue 作用域插槽

看文档的时候总会懵逼 找了其他大佬的博客看了一下 发现还是"俗" 一点的解释比较适合我

作用域插槽是啥?

  • 官方一点的:父组件应用子组件可以给插槽填充内容,但一般只填充html标签,里边的数据信息要由插槽自己提供,这个过程称为作用域插槽
  • 自己总结的俗话:父组件在用子组件来填充插槽的时候 有时候需要用到子组件里面插槽的数据 .
    子组件文件插槽上带的数据 在父组件的子组件标签里 让一个标签 带有slot-scope="xxx" 去接收 以便在下面进行调用

目前我的理解就是 在父子组件之间体现的比较多 所以就用父子组件举例
比如说 我在子组件文件里面来个插槽

//这是子组件文件
<slot  name="jinmao" uname="haomeili" age="250" gender="woman" hobby="eatFoots">

-----分割线 下面是父组件--------


//这里是父组件
//<com-haomeili> 是注册后的子组件标签
<com-haomeili>
<p slot-scope="recData">
//这里的recData  就是接收到上面子组件文件里面name叫jinmao的插槽里面传递的数据
//就可以进行如下使用
我的土金毛叫{{recData.uname}},她今年{{recData.age}}岁了,她的性别是{{recData.gender}},爱好是{{recData.hobby}}

 </p>



©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 在网上搜了很多关于作用域插槽的解释,感觉没有写得很具体的吧,我认为应该对组件化有很深的理解才会触及到这个问题...
    前端司南阅读 25,191评论 15 40
  • 首先简单说下为什么要使用作用域插槽,有时候需要组件带有一个可从子组件获取数据的可复用的插槽。 下面还是通过例子来讲...
    清风伴我行阅读 4,558评论 0 0
  • 什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装...
    youins阅读 13,159评论 0 13
  • 组件(Component)是Vue.js最核心的功能,也是整个架构设计最精彩的地方,当然也是最难掌握的。...
    六个周阅读 10,931评论 0 32
  • 【2019-3-4更新】Vue 2.6+修改了部分语法,对插槽的使用有了较多的更新。在本文中笔者在相应位置给出了更...
    果汁凉茶丶阅读 13,478评论 2 36