1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo1</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body> <div id="app"> <todo> <todo-title slot="todo-title" :title="title"></todo-title> <todo-items slot="todo-items" v-for="(item1,index) in todoItems" :item2="item1" :index="index" v-on:remove="removeItems(index)"></todo-items> </todo> </div>
<script> 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:['item2','index'], template: '<li>{{item2}} <button @click="remove()">删除</button></li>', methods:{ remove:function (index) { this.$emit('remove',index) } } }) var vm = new Vue({ el:'#app', data:{ title:"sss", todoItems:['hello world','dddddd'] }, methods: { removeItems:function (index) { console.log("删除了"+this.todoItems[index]+"OK") this.todoItems.splice(index,1); } }
}); </script> </body> </html>
|