Vue学习04-自定义事件+内容分发

最新推荐文章于 2022-04-22 18:05:49 发布

不可观测的喵呜机

最新推荐文章于 2022-04-22 18:05:49 发布

阅读量49

点赞数

分类专栏： Vue学习文章标签： vue

本文链接：https://blog.csdn.net/weixin_43971670/article/details/116427418

版权

Vue学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

自定义事件+内容分发

本文仅仅为本人学习vue的简易笔记，内容不严谨，有瑕疵，请慎重浏览

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

<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in ItemsList" v-bind:item="item" v-bind:index="index" v-on:remove="removeItems(index)"></todo-items>
    </todo>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script type="text/javascript">
    //slot 插槽
    Vue.component("todo",{
        template: "<div>\n" +
            "<slot name='todo-title'></slot>"+
            "    <ul>\n" +
            "        <slot name='todo-items'></slot>" +
            "    </ul>\n" +
            "</div>"
    });

    Vue.component("todo-title",{
        props: ['title'],
        template: "<div>{{title}}</div>"
    });
    Vue.component("todo-items",{
        props: ['item','index'],
        //只能绑定当前组件的方法
        template: "<li>{{index}}----{{item}} <button v-on:click='remove'>删除</button></li>",
        methods: {
            remove: function (index) {
                this.$emit('remove',index)
                alert("删除成功")
            }
        }
    })

    var vm = new Vue({
        el:'#app',
        data: {
            title: "列表",
            ItemsList: ["Java", "Web", "Python"]
        },
        methods: {
            removeItems: function (index) {
                //一次删除一个元素
                this.ItemsList.splice(index,1);
            }
        }
    });
</script>

</body>
</html>

效果图：
在这里插入图片描述

不可观测的喵呜机

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习04-自定义事件+内容分发

自定义事件+内容分发本文仅仅为本人学习vue的简易笔记，内容不严谨，有瑕疵，请慎重浏览<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <todo> <todo-
复制链接

扫一扫

专栏目录