Vue插槽

最新推荐文章于 2022-08-25 17:46:43 发布

意外

最新推荐文章于 2022-08-25 17:46:43 发布

阅读量101

点赞数

文章标签： vue html

本文链接：https://blog.csdn.net/qq_42472710/article/details/112832109

版权

<!DOCTYPE html>
<html lang="en"></html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- view层 模板 -->
<div id="app">

    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item, index) in todoItems"
                    :item="item" v-bind:index="index" v-on:remove="removeItem(index)" :key="index"></todo-items>
    </todo>

</div>

<!-- 导入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>

    // 定义插槽
    Vue.component("todo", {
        template: '<div> \
                        <slot name="todo-title"></slot>\
                        <ul>\
                            <slot name="todo-items"></slot>\
                        </ui>\
                   </div>'
    });

    Vue.component("todo-title", {
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-items", {
        props: ['item', 'index'],
        template: '<li>{{index}}---{{item}} <button @click="remove">删除</button></li>',
        methods: {
        remove: function (index) {
            this.$emit('remove', index);
        }
    }
    });

    var vm = new Vue({
        el: "#app",
        // Model层 数据
        data: {
            title: '书籍列表',
            todoItems: ['Java', 'C', 'C#'],
        },
        methods: {
            removeItem: function (index) {
                this.todoItems.splice(index, 1);  // 一次删除一个元素
            }
        }
    });
</script>

</body>
</html>

意外

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue插槽

<!DOCTYPE html><html lang="en"></html><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <todo> <todo-title s
复制链接

扫一扫

Vue插槽

“相关推荐”对你有帮助么？