1、首先我们先看一段代码,再来理解一下插槽slot的概念:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<todo>
<xian slot="xian" :title="title"></xian>
<yu slot="yu" v-for="item in items" v-bind:item="item"></yu>
</todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
Vue.component("todo",{//两个插槽各自另外定义一个组件,用模板填写内容
// 第一个是个大的组件,其他都往槽里插,就和占位符一样
template: '<div>\
<slot name="xian"></slot>\
<ul>\
<slot name="yu"></slot>\
</ul>\
</div>'
});
// 组件名称不能有大写字母,否则无法与标签替换(标签即使是大写字母,编译渲染后也会变成小写,与设置的组件名称就产生了不统,所以组件无法正确替换)
Vue.component("xian",{
props: ['title'],
template: '<div>{{title}}</div>'
});
Vue.component("yu",{
props: ['item'],
template: '<li>{{item}}</li>'
});
// new Vue实例需要放在component后面,否则根据执行顺序会报错未注册component
var vm = new Vue({
el: "#app",
data: {
title: "作者",
items: ['咸鱼翻身1','咸鱼翻身2','咸鱼翻身3']
}
});
</script>
</body>
</html>
运行结果:
2、再理解一下:
slot你就想象成留的空白,你想加入什么数据就可以传什么数据,slot相当于一个空标签,通过vue可以实现动态改变值和样式,把一块区域内容抽了出来可以实现复用,就和Java里封装的工具类一样