番外篇：VUE（九）插槽 

slot：所谓插槽就是模板内嵌入模板

<body>
    <!--3、定义id为app的div-->
    <div id="app">
        <!--使用组件和插槽实现view和model的渲染-->
        <vue-div>
            <!--vue-title模板 slot关联组件 v-bind绑定参数-->
            <vue-title slot="vue-title" :title="kctitle"></vue-title>
            <!--vue-li模板 slot关联组件 v-bind绑定参数-->
            <vue-li slot="vue-li" v-for="item in kcitems" :item="item"></vue-li>
        </vue-div>
    </div>
    <script>
        //2、定义一个title模板
        Vue.component("vue-title",{
            props:["title"],
            template:"<h3>{{title}}</h3>"
        });

        //2、定义一个li列表模板
        Vue.component("vue-li",{
            props:["item"],
            template:"<li>{{item}}</li>"
        });

         //2、定义一个div列表模板 里面按显示结构插入两个插槽（即模板），name为模板名称
         Vue.component("vue-div",{
             template:'<div>\
                <slot name="vue-title"></slot> \
                <ul>\
                    <slot name="vue-li"></slot> \
                </ul> \
                </div>'
         });
        //1、定义一个vue对象
        new Vue({
            el:"#app",
            data:{
                // 课程标题
                kctitle:"课程列表：",
                // 课程内容
                kcitems:["java","php","vue"]
            }
        });
    </script>
</body>
posted @ 2021-05-31 18:53  努力的校长  阅读(47)  评论(0)    收藏  举报