十、Vue中的作用域插槽

作者: 李浩然_6fd1 | 来源:发表于2019-03-20 17:52 被阅读0次

18、Vue3 作用域插槽
Vue.js第3课-深入理解Vue组件（part03）
Vue之深入理解插槽—slot, slot-scope, v-s
十、Vue中的作用域插槽
Vue中作用域插槽
Vue.js作用域插槽的理解和模板“渲染”步骤
VUE2.5.0+和2.5.0-版本作用域插槽的用法区别
vue插槽slot
vue-slot
Vue中的作用域插槽

有一个这个需求：网页中的数据是由子组件提供的，但是最后如何显示的，不由子组件来决定。而是父组件调用子组件的时候，给子组件做模板。

<body>
    <div id="root">
        <child>
            <template slot-scope="props">
                <li>{{props.item}}</li>
            </template>
        </child>
    </div>

    <script>
        Vue.component('child',{
            data:function(){
                return{
                    list:[1,2,3,4]
                }
            },
            template:`<div>
                       <ul>
                           <slot
                               v-for="item of list"
                               :item=item
                           ></slot>
                       </ul>
                      </div>`
        })

        var vm = new Vue({
            el:'#root'
        }) 
    </script>
</body>

整个执行逻辑是：
当父组件调用子组件的时候，给子组件传了一个作用域插槽，作用域插槽必须是在template标签内，同时在template标签上声明从子组件接收的数据都放在哪里（props中），在template内，放的数据是接收到的信息应该如何展示（例子中是用li标签来展示，当然还可以换成别的，比如用h1标签）。
什么时候使用作用域插槽：当子组件循环（例子中的数组展示），或者子组件的某一部分的DOM结构应该由外部传递过来，这个时候就用作用域插槽。
使用作用域插槽，子组件可以向父组件传数据，父组件如果想接收这个数据，必须使用template标签，同时使用slot-scope对应的属性名来接收所传过来的数据，子组件template有个item，那么父组件的作用域插槽里面就可以接收这个item，