javascript - 敢问vue"作用域插槽"的真实应用场景有哪些?
阿神
阿神 2017-04-11 12:03:29
[JavaScript讨论组]

在vue官方文档中看到vue v2.1.0新增作用域插槽,文档中说明的使用方法和案例我都看明白了,但无法理解该案例的用意:

作用域插槽更具代表性的用例是列表组件,允许组件自定义应该如何渲染列表每一项:


  
  

列表组件的模板:

我对这个案例的理解是:子组件从数据源中获取数据,然后回传给父组件来做样式层面的渲染。这跟我的认知有冲突,难道不是应该父组件获取数据后,再交给子组件来渲染的吗?

敢问大家是怎么理解官方给出的这个案例的呢?另外,能否介绍一下在实际项目中对此特性的应用场景?

补充:我是明白slot的用意的,我只是不明白为什么既然在slot机制下,slot部分的控制权已经完全交给父组件了,还要提供子组件的属性供父组件来使用。

阿神
阿神

闭关修行中......

全部回复(2)
黄舟

比如你写了一个对话框组件,发布后,你的使用者想自定义标题部分的样式或内容,比如显示很多自己定义的按钮。
此时,你就需要使用这个功能了。
其实这个功能,就是做到了更灵活。

抛砖引玉吧。

巴扎黑

普通的slot,在parent中访问不到child的数据。Scoped Slots可以。

官方的例子,一个列表,不同的场景有不同的具体展示方式,但数据是相同的。这时可以把列表定义成抽象的,类似interface,具体的implement在使用的时候(parent中)确定。

<list-comp>
    <header> title </header>

    <ul>
     <slot name="item" v-for="item in items" :text="item.text">
       <!-- 具体的列表展示形式在parent中使用slot -->
     </slot>
    </ul>

    <footer>other things<footer>
<list-comp>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号