7.0、插槽slot
vue-slot插槽使用方法代码如下：
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vuetest7</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="div1">
<todo>
<booktitle slot="title" v-bind:title="title"></booktitle>
<booksname slot="booksname" v-for="item in items" v-bind:booksname="item.booksname"></booksname>
</todo>
</div>
<script>
Vue.component("todo",{
template:
'<div>' +
'<slot name="title"></slot>' +
'<ul>' +
'<slot name="booksname"></slot>'+
'</ul>'+
'</div>'
})
Vue.component("booktitle",{
props: ['title'],
template: '<div>{{title}}</div>'
})
Vue.component("booksname",{
props: ['booksname'],
template: '<div>{{booksname}}</div>'
})
var vm = new Vue({
el: "#div1",
data: {
title: "java全栈工程师必修课！",
items: [
{"booksname":"java"},
{"booksname":"css"},
{"booksname":"js"}
]
}
})
</script>
</body>
</html>
slot插槽的个人总结:
使用slot插槽之后，前端展示数据不需要再用{{}}这种方式去获取数据然后展示，只需要专注于干前端的事情专注于视图，而数据全部交给script或者说交给component、template来做就可以了。
因为我们可以发现用了slot插槽后，前端界面非常干净没有再用到{{}}这样的方式去获取数据，做到了view与model的分离
632
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
