【Vue】内容分发 | 插槽slot
内容分发
在Vue.js中我们使用元素作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中。
比如说我的一个页面（整个蓝色），就两个地方需要动态的变化（两个白色长条），那我就可以在这两个地方使用插槽。动态的可拔插。
使用模板引擎也可以完成，但是使用插槽可能会更简单一些。
测试
比如准备制作一个待办事项组件（todo），该组件由代办标题（todo-title）和待办内容（todo-items）组成，但这三个组件又是相互独立的，该如何操作呢？
第一步：定义一个待办事项的组件
<div id="app">
<todo>todo>
div>
<script>
Vue.component('todo', {
template: '\
待办事项\
\
- 学习Java
\
\
'
});
script>
template中反斜杠的作用是换行。不然的话你一敲回车他会给你作一个字符串拼接，看着不舒服。
第二步：用插槽替换其中可拔插的部分
<script>
Vue.component('todo', {
template: '\
\
\
'
});
script>
第三步：定义要插入到插槽中的组件
<script>
Vue.component('todo-title',{
template: '标题'
});
Vue.component('todo-items',{
template: 'Java '
});
script>
第四步：将组件插入到插槽中
<div id="app">
<todo>
<todo-title>todo-title>
<todo-items>todo-items>
todo>
div>
效果如图：
会发现有一点不太对，显示了两遍。但是至少title和items都插进去了，说明对于数据的内容没有渲染错误。
这个问题是因为插槽和组件没有分别一一对应好。应该是两个插槽，各自对应一个组件，就可以正常显示了。所以我们要对插槽标签定义name属性。同时，对自定义标签定义slot属性表明它对应于哪个插槽。
<div id="app">
<todo>
<todo-title slot="todo-title">todo-title>
<todo-items slot="todo-items">todo-items>
todo>
div>
第五步：把里面的数据变为动态的
看看如何把“标题”、“Java”这些静态的数据改为动态获取的内容。
<script>
Vue.component('todo-title',{
props: [title],
template: '{{title}}'
});
Vue.component('todo-items',{
props: ['item'],
template: '{{item}} '
});
script>
在组件定义中用props来把数据改为动态的。
根据之前所学内容，进行“标签”、“组件”、“Vue实例”三者之间的数据绑定：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" :tit="title">todo-title>
<todo-items slot="todo-items" :itm="i" v-for="i in todoItems">todo-items>
todo>
div>
<script>
Vue.component('todo', {
template: '\
\
\
'
});
Vue.component('todo-title',{
props: ['tit'],
template: '{{tit}}'
});
Vue.component('todo-items',{
props: ['itm'],
template: '{{itm}} '
});
var vm = new Vue({
el: "#app",
data: {
title: "学习列表",
todoItems: ['Java','前端','Linux']
}
});
script>
body>
html>
为了便于看出互相调用的关系，我把一些变量名做了删改。
这样，就动态地展示出标题、内容了：
