组件在Vue中就相当于一块可以复用的代码块,类似于方法的存在,而插槽就是可以放置组件的地方
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0-0/axios.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<todo>
<title1 slot="slot1" :title="title"></title1>
<books slot="slot2" v-for="item in book123" :book="item"></books>
</todo>
</div>
<script>
Vue.component("todo",{
template: '<div>' +
'<slot name="slot1"></slot>' +
'<br>' +
'<slot name="slot2"></slot>' +
'<br>' +
'</div>'
});
Vue.component("title1",{
props: ['title'],
template: '<div>{{title}}</div>'
});
Vue.component("books",{
props: ['book'],
template: '<li>{{book}}</li>'
});
var vm = new Vue({
el: '#app',
data: {
title: "带司",
book123: ["book1","book2","book3"]
}
})
</script>
</body>
</html>
一个简单的插槽例子,定义了三个组件,其中第一个组件内有两个插槽,分别命名为slot1和slot2
我们要做的就是把标签,插槽,和组件三者关联起来
这里的slot2就只是个名字而已,作用就是用来和组件绑定,如上图,在todo标签内新增了两个标签,然后和slot绑定上,就能插入进去了,再为组件本身的参数赋值即可