自定义事件:
执行流程:首先在todo-items里边写一个删除的方法,在这个方法里边通过使用
this.$emit('remove',index);
和v-on:remove="removeItem(index)"
联系起来,因为remove绑定的方法是removeItem(index)
,所以当点击按钮的时候就可以操作到Vue里边的数据了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义事件</title>
</head>
<body>
<div id="app">
<todo>
<!--v-bind:title="title"等价于 :title="title"-->
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items slot="todo-items" v-for="(item,index) in items"
:item="item" :index="index" v-on:remove="removeItem(index)"></todo-items>
</todo>
</div>
<!--引入vue的cdn-->
<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>\
</ul>\
</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='removeComponent'>删除</button></li>",
methods:{
removeComponent: function (index) {
this.$emit('remove',index);
}
}
});
var vm = new Vue({
el: "#app",
data: {
title: "四大名著",
items: ["红楼梦","西游记","三国演义","水浒传"]
},
methods: {
removeItem: function (index) {
this.items.splice(index,1);
}
}
});
</script>
</body>
</html>
结果如下