vue框架——插槽slot

Posted 2020-12-24 chll

slot：插槽相当于一个统一资源占位符，对使用的模板在插槽中写入自己想要的数据
<slot name = "aaa"></slot>//name对插槽进行命名为aaa
<template slot = "aaa">//调用组件或者自己编写的组件并绑定名字为aaa的插槽，来实现对插槽的替换与动态变化
</template>
<div id = "app">
    <!--<p>测试列表</p>
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </ul>-->
    <!--<ul v-for="item in items" v-block>
        <li>{{item}}</li>
    </ul>-->
    <test>
        <test-title slot = "test-title" v-bind:title = "title"></test-title>
        <test-items slot = "test-items" v-for = "item in items" v-bind:item = "item"></test-items>
    </test>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">

    Vue.component("test",{
        template:
            ‘<div>‘ +
                ‘<slot name="test-title"></slot>‘ +
                ‘<ul>‘ +
                    ‘<slot name="test-items"></slot>‘ +
                ‘</ul>‘ +
            ‘</div>‘
    });
    Vue.component("test-title",{
        props:[‘title‘],//需要使用v-bind来绑定并且将值传入并用props接受，否则是找不到滴
        template: ‘<div>{{title}}</div>‘
    });
    Vue.component("test-items",{
        props: [‘item‘],
        template: ‘<li>{{item}}</li>‘
    });
    var vm = new Vue({
        el:"#app",
        data:{
            title:"陈鸿柳",
            items:[‘A‘,‘B‘,‘C‘]
        }
    });
</script>