Vue插槽-slot

最新推荐文章于 2022-02-27 17:23:00 发布

zhongbai-

最新推荐文章于 2022-02-27 17:23:00 发布

阅读量77

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/sjgllllll/article/details/112660352

版权

vue 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!--第一步引入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    /*第二部创建Vue组件，template构建模板*/
    Vue.component('todo', {
        template: '<div>\
           <slot name="todo-title"></slot>\
            <ul>\
                <slot name="todo-items"> </slot>\
            </ul>\
    </div>'
    });
    Vue.component('todo-title',{
        props:['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component('todo-items',{
        props:['item'],
        template: '<li>{{item}}</li>'
    });
    /*第三步创建Vue并绑定对象*/
    var vm = new Vue({
        el: "#app",
        /*Model层 ：数据*/
        data: {
            title: 'slot案例',
            todoitems:['java','后端','前端']

        }
    });
</script>

<!--第四步赋值 view层 模板-->
<div id="app">
<todo>
    <todo-title slot="todo-title" v-bind:title="title"></todo-title>
    <todo-items slot="todo-items" v-for="item in todoitems" v-bind:item="item"></todo-items>
</todo>
</div>