<div id="app"> <todo> <todo-title slot="todo-title" v-bind:title1="title"></todo-title> <todo-items slot="todo-items" v-for="(item,index) in todoItems" v-bind:item="item" v-bind:index="index" v-on:remove="removeItems(index)"></todo-items> </todo> </div> <!-- 导入Vue.js--> <script src=https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js></script> <script> //slot:插槽 Vue.component("todo",{ template: '<div>\ <slot name="todo-title"></slot>\ <ul>\ <slot name="todo-items"></slot>\ </ul>\ </div>' }); Vue.component("todo-title",{ props:['title1'], template:'<div>{{title1}}</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", data:{ title:"秦老师系列课程", todoItems:["狂神说Java","狂神说前端","狂神说Linux"] }, methods:{ removeItems:function(index){ this.todoItems.splice(index,1);//一次删除一个元素 } } }); </script>
Vue自定义事件
最新推荐文章于 2024-07-06 16:47:02 发布