Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue组件 - Slot 内容分发
目录
Slot内容分发
混合父组件的内容和子组件自己模板 -- 内容分发
父组件模板的内容在父组件作用域内编译，子组件模板内容在子组件作用域内编译。
旧版slot
如果直接在组件内部放入自定义内容是无法显示的；
slot插槽技术，可以在组件内部自定义显示内容。
单插槽
首先创建一个组件，在组件中设置好插槽位置，注意slot是固定的。
示例如下：
<script>
Vue.component("child", {
template:`
<div>
child
<slot></slot>
</div>
`
})
let vm = new Vue({
el:"#box"
})
</script>使用插槽
写一行会在插槽中显示一行，多行的话，也会出现多行；
示例如下：
<div id="box">
<!--当前组件或者节点 在哪个模板中，就能访问哪个模板状态-->
<child>
<div>面朝大海</div>
<div>春暖花开</div>
</child>
</div>效果如下：
这叫做单个插槽写法。
具名插槽
如果要使用多个自定义内容的，可以使用具名插槽。
修改原有组件内容，改为具名插槽格式。
示例如下：
Vue.component("child", {
template:`
<div>
child
<slot name="a"></slot>
<slot name="b"></slot>
<slot name="c"></slot>
<slot></slot>
</div>
`
})组件使用slot，进行对号入座。
示例如下：
<div id="box">
<!--当前组件或者节点 在哪个模板中，就能访问哪个模板状态-->
<child>
<div slot="a">面朝大海</div>
<div slot="b">春暖花开</div>
<div slot="c">从明天起做一个快乐的人</div>
<div>劈柴喂马 关心粮食和蔬菜</div>
</child>
</div>效果如下：
插槽实现导航
利用slot可以实现导航栏和导航图标的灵活显示。
使用slot插槽后不再受到内置组件限制。
示例如下：
<div id="box">
<!--当前组件或者节点 在哪个模板中，就能访问哪个模板状态-->
<navbar>
<button slot="left"> < 返回</button>
<i class="icon" slot="right">字体图标</i>
</navbar>
</div>
<script>
Vue.component("navbar", {
template:`
<div>
<slot name="left"></solt>
<span>navbar</span>
<slot name="right"></solt>
</div>
`
})
let vm = new Vue({
el:"#box"
})
</script>使用插槽优点
通过插槽自定义导航栏两侧的内容。
扩展组件能力，提高组件复用性。
新版slot
新版slot是2.6版本的vue。并不是3后的版本。
以前的slot不知道算属性还是指令。
现在明确为指令写法，#号为简写方式，上面是指令写法。
定义组件和插槽不需修改。
示例如下：
<child>
<template v-slot:a>
<div>面朝大海</div>
</template>
<template v-slot:b>
<div>春暖花开</div>
</template>
</child>Or
<navbar>
<template #left>
<button> < 返回 </button>
</template>
<template #right>
<i class="icon">字体图标</i>
</template>
</navbar>官网示例
插槽版抽屉
对原有的抽屉（子传父示例）改为插槽版。
即原来的导航列表的打开和关闭功能。
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="../lib/vue.js"></script>
<div id="box">
<navbar>
<button @click="isShow=!isShow">点击</button>
</navbar>
<sidebar v-show="isShow"></sidebar>
</div>
<script>
// 定义一个全局组件
Vue.component("navbar", {
template: `<div style="background-color: red">
nabbar- <slot></slot>
</div>`,
})
Vue.component("sidebar", {
template:`<div style="background-color: yellow">
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
</div>`
})
let vm = new Vue({
el:"#box",
data:{
isShow: true
}
})
</script>
</body>
</html>去掉Vue原有监听和触发事件，只通过isShow取反后的值判断来显示。
总结
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue组件 - Slot 内容分发