[Vue]插槽slot

插槽的基本使用

插槽的作用：在子组件中，插入一段html代码片段，插槽具有默认值

div id="app">
       <container>
           <div>使用slot插入的内容</div>
       </container>
</div>
script>
    Vue.component('container', {
        template: `<div>
        <slot><h1>default<h1/></slot> // 插槽具有默认值
        content-body
        </div>`
    })
    var vm = new Vue({
        el: '#app'
    })
</script>
复制代码

具名插槽

通过名字来指定插槽的插入位置

<div id="app">
       <container>
           <div slot='header'>header</div>
           <div slot='footer'>footer</div>
       </container>
</div>
script>
    Vue.component('container', {
        template: `<div>
        <slot name='header'></slot>
        content-body
        <slot name='footer'></slot>
        </div>`
    })
    var vm = new Vue({
        el: '#app'
    })
</script>
复制代码

作用域插槽

使用场景：子组件循环渲染data中的list,但是以li循环还是h1或者其他的标签来循环取决于外界，这时代码可以这样编写

1. 使用 :item='item' 向外暴露数据
2. 外界 固定语法template占位标签包裹，属性slot-scop="props"来接收暴露的数据

<div id="app">
       <container>
       // 固定语法template占位标签包裹，属性slot-scop="props"来接收暴露的数据
           <template slot-scope="props">
                <h1>{{props.item}}</h1>
           </template>
       </container>
</div>
<script>
    Vue.component('container', {
        data: function() {
            return {
                list:[1,2,3,4]
            }
        },
        template: `<div>
                        <slot v-for="item of list" :item="item"> //:item='item' 向外暴露数据
                        </slot>
                   </div>`,
        
    })
    var vm = new Vue({
        el: '#app'
    })
</script>
复制代码

转载于:https://juejin.im/post/5cd036c8f265da035b61ac4d