Vue学习笔记16：自定义事件内容定义-CSDN博客

本文链接：https://blog.csdn.net/m0_62491934/article/details/126938809

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气案例</title>
    <script type="text/javascript" src="../../../图片素材/vue.js"></script>
</head>
<body>
    <!-- view层 模板 -->
    <div id="root">
        <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="remvoeItems(Index)" :key="index"></todo-items>
        </todo>
    </div>
</body>

<script type="text/javascript">
        Vue.config.productionTip=false //阻止vue在启动时生成生产提示。
    Vue.component("todo",{
                template:'<div>\
                <slot name="todo-title"></slot>\
                <ul>\
                <slot name="todo-items"></slot>\
                </div>'
    });

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

    });
    
    var vm=new Vue({
        el:"#root",
        data:{
            title:"秦老师列表",
            todoItems:["狂神说Java","狂神说前端","狂神说Linux"]
        },
         methods:{
            removeItems:function(index){
                console.log("删除了"+this.todoItems[index]+"OK");
                this.todoItems.splice(index,1);//一次删除一个元素
            }
         }
    });
</script>
</html>