Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue组件 - Slot 内容分发
目录
Slot内容分发
旧版slot
单插槽
使用插槽
具名插槽
插槽实现导航
使用插槽优点
新版slot
Or
插槽版抽屉
总结
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 内容分发
