vue插槽的使用

Posted 2020-11-23 panrui1994

 

1：如果调用子组件的时候，只传递一个内容，可以不用solt属性，相当于默认
<child-component>
    <div> //看这里
        我是一类人，
        我是默认的插槽
    </div>
</child-component>
Vue.component(‘child-component‘,{
    template:`
        <div>
        <h4>这个世界不仅有男人和女人</h4>

        <slot></slot> //看这里
        </div>
        `
})

 

2：命名插槽
<div id="app">
    <child-component>
        <template slot="girl">  //看这里
            漂亮、美丽、购物、逛街
        </template>
        <div>
            我是一类人，
            我是默认的插槽
        </div>
    </child-component>
</div>
Vue.component(‘child-component‘,{
    template:`
        <div>
        <h4>这个世界不仅有男人和女人</h4>

        <slot name="girl"></slot> //看这里

        <slot></slot>
        </div>
    `
})

 

3：作用域插槽
<div id="root">
    <child>
        <template slot-scope="props"><!--定义一个插槽，该插槽必须放在template标签内-->
            <li>{{props.value}}</li><--!定义使用渲染方式-->
        </template>
    </child>
    <child>
        <template slot-scope="props">
            <h1>{{props.value}}</h1><!--定义不同的渲染方式-->
        </template>
    </child>
</div>
<script>
    Vue.component(‘child‘,{
        data: function(){
            return {
                list:[1,2,3,4]
            }
        },
        template: `<div>
                        <ul>
                            <slot v-for="value in list" :value=value>//使用slot占位 这里绑定的属性 value 全部存放再上面props里面
                            </slot>
                        </ul>
                    </div>`
    })
    var vm=new Vue({
        el: ‘#root‘
    })
</script>