插槽slot
在Vue.js中我们使用< slot >
元素作为承载分发内容的出口,作者称之为插槽,可以应用在组合组件的场景中
测试
准备制作一个待办事项组件(todo),该组件由待办标题(todo-title)和待办内容(todo-items)组成,但这三个组件又是相互独立的,该怎么操作呢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id = "app">
<!-- <p>列表书籍</p>-->
<!-- <ul>-->
<!-- <li>Java</li>-->
<!-- <li>Java</li>-->
<!-- <li>Java</li>-->
<!-- </ul>-->
<todo>
<todo-title slot="slot-title" :title="title"></todo-title>
<todo-items slot="slot-items" v-for="item in todoItems" v-bind:item1="item"></todo-items>
</todo>
</div>
<!--引入JS文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
//slot:插槽
Vue.component("todo",{
template:
'<div>\
<slot name="slot-title"></slot>\
<ul>\
<slot name="slot-items"></slot>\
</ul>\
</div>'
});
Vue.component("todo-title",{
props: ['title'],
template: '<div>{{title}}</div>'
});
Vue.component("todo-items",{
props: ['item1'],
template: '<li>{{item1}}</li>'
});
var vm = new Vue({
el: '#app',
data: {
title: "列表",
todoItems: ['java','linux','前端']
}
});
</script>
</body>
</html>
自定义事件
通过以上代码不难发现,数据项在Vue的实例中,但删除操作要在组件中完成,那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了,Vue为我们提供了自定义事件的功能,很好的帮助我们解决了这个问题:使用this.$emit(‘自定义事件名’,参数),操作过程如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id = "app">
<!-- <p>列表书籍</p>-->
<!-- <ul>-->
<!-- <li>Java</li>-->
<!-- <li>Java</li>-->
<!-- <li>Java</li>-->
<!-- </ul>-->
<todo>
<todo-title slot="slot-title" :title="title"></todo-title>
<todo-items slot="slot-items" v-for="(item,index) in todoItems"
v-bind:item1="item" v-bind:index="index" v-on:remove="removeItems(index)"></todo-items>
</todo>
</div>
<!--引入JS文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
//slot:插槽
Vue.component("todo",{
template:
'<div>\
<slot name="slot-title"></slot>\
<ul>\
<slot name="slot-items"></slot>\
</ul>\
</div>'
});
Vue.component("todo-title",{
props: ['title'],
template: '<div>{{title}}</div>'
});
Vue.component("todo-items",{
props: ['item1','index'],
//只能绑定当前组件的方法
template: '<li>{{index}}---{{item1}} <button v-on:click="remove">删除</button></li>',
methods: {
remove: function (index){
//this.$emit 自定义事件分发
this.$emit('remove',index);
}
}
});
var vm = new Vue({
el: '#app',
data: {
title: "列表",
todoItems: ['java','linux','前端']
},
methods: {
removeItems: function(index){
console.log("删除了"+this.todoItems[index]);
this.todoItems.splice(index,1); //一次删除一个元素
}
}
});
</script>
</body>
</html>