Vuejs学习笔记(二)-12.组件插槽的使用
一、插槽的基本使用
场景:在实际项目中,很多页面有相似的模块(组件)架构,比如APP导航栏。
导航组件1:
导航组件2:
导航组件3:
以上三个页面共性部分就是左中右三个标签,左侧标签相同都是跳转连接,中间2个是title,1个是tab切换bar,右侧2个是跳转页面连接,1个为空。
对于这样的场景开发3个不同的导航栏代码量大了,所以只需要一个导航栏组件。
要点:1.对于相同结构的模块使用一个组件来构造其结构。
2.对于同一个部分展示不同的功能可以使用插槽,插槽有能力发挥扩展作用。
插槽有什么用?如何扩展模块功能?-----思考--->接线板有什么用?电脑接口有什么用?
答案:扩展功能用。即电脑接口可以外接显示器,可以外接硬盘,外接音箱。
我们来看一个案例:
以下是一个父组件在使用了子组件多次
1 <!-- 2 @author:invoker 3 @project:project_lianxi 4 @file: 01-slot的基本使用.html 5 @contact:invoker2021@126.com 6 @descript: 7 @Date:2021/7/5 9:10 8 @version: html5 9 --> 10 11 <!DOCTYPE html> 12 <html lang="en"> 13 <head> 14 <meta charset="UTF-8"> 15 <title>01-slot的基本使用</title> 16 </head> 17 <body> 18 <div id="app"> 19 <h2>{{ message }}</h2> 20 <p>------------------------父子组件分割线----------------------------</p> 21 <cpn></cpn> 22 <p>------------------------子组件分割线----------------------------</p> 23 <cpn></cpn> 24 <p>------------------------子组件分割线----------------------------</p> 25 <cpn></cpn> 26 </div> 27 28 <template id="cpn"> 29 <div> 30 <h2>我是子组件1</h2> 31 </div> 32 </template> 33 <script src="../js/vue.js"></script> 34 <script> 35 const cpn = { 36 template: '#cpn' 37 } 38 39 const app = new Vue({ 40 el: '#app', 41 data: { 42 message: 'hello 插槽' 43 }, 44 components: { 45 cpn 46 } 47 }) 48 </script> 49 </body> 50 </html>
我们希望子组件内显示不同的页面元素,比如第一个子组件显示按钮,第二个子组件显示输入框,第三个字组件显示超链接。
实现步骤如下:
1.需要使用在子组件内部定义插槽<slot>
2.在父组件调用子组件标签的内部插入不同元素
页面如下:
代码如下:
1 <!-- 2 @author:invoker 3 @project:project_lianxi 4 @file: 01-slot的基本使用.html 5 @contact:invoker2021@126.com 6 @descript: 7 @Date:2021/7/5 9:10 8 @version: html5 9 --> 10 11 <!DOCTYPE html> 12 <html lang="en"> 13 <head> 14 <meta charset="UTF-8"> 15 <title>01-slot的基本使用</title> 16 </head> 17 <body> 18 <div id="app"> 19 <h2>{{ message }}</h2> 20 <p>------------------------父子组件分割线----------------------------</p> 21 <cpn><button>插入按钮</button></cpn> 22 <p>------------------------子组件分割线----------------------------</p> 23 <cpn><input type="text" placeholder="插入输入框"></cpn> 24 <p>------------------------子组件分割线----------------------------</p> 25 <cpn><a href="www.google.com">插入谷歌链接</a></cpn> 26 </div> 27 28 <template id="cpn"> 29 <div> 30 <h2>我是子组件1</h2> 31 <slot></slot> 32 </div> 33 </template> 34 <script src="../js/vue.js"></script> 35 <script> 36 const cpn = { 37 template: '#cpn' 38 } 39 40 const app = new Vue({ 41 el: '#app', 42 data: { 43 message: 'hello 插槽' 44 }, 45 components: { 46 cpn 47 } 48 }) 49 </script> 50 </body> 51 </html>
二、插槽中默认显示
场景2:在父组件中写不同标签解决了不同展示的问题,但是如果组件中的标签都相同,每个都写就比较麻烦
此时可以使用到插槽默认值,就是给插槽一个默认值,如果父组件使用组件时,没有个组件插值,则使用子组件插槽内默认提供的标签元素。
在子组件插槽内部定义插槽默认展示。
代码如下:
1 <!-- 2 @author:invoker 3 @project:project_lianxi 4 @file: 01-slot的基本使用.html 5 @contact:invoker2021@126.com 6 @descript: 7 @Date:2021/7/5 9:10 8 @version: html5 9 --> 10 11 <!DOCTYPE html> 12 <html lang="en"> 13 <head> 14 <meta charset="UTF-8"> 15 <title>01-slot的基本使用</title> 16 </head> 17 <body> 18 <div id="app"> 19 <h2>{{ message }}</h2> 20 <p>------------------------父子组件分割线----------------------------</p> 21 <cpn><button>插入按钮</button></cpn> 22 <p>------------------------子组件分割线----------------------------</p> 23 <cpn><input type="text" placeholder="插入输入框"></cpn> 24 <p>------------------------子组件分割线----------------------------</p> 25 <cpn><a href="www.google.com">插入谷歌链接</a></cpn> 26 <!-- <cpn><h2>我在插槽占位</h2></cpn>--> 27 <!-- <cpn><h2>我在插槽占位</h2></cpn>--> 28 <!-- <cpn><h2>我在插槽占位</h2></cpn>--> 29 <!-- <cpn><h2>我在插槽占位</h2></cpn>--> 30 <cpn></cpn> 31 <cpn></cpn> 32 <cpn></cpn> 33 <cpn></cpn> 34 <cpn></cpn> 35 </div> 36 37 <template id="cpn"> 38 <div> 39 <h2>我是子组件1</h2> 40 <slot><h2>我在插槽占位</h2></slot> 41 </div> 42 </template> 43 <script src="../js/vue.js"></script> 44 <script> 45 const cpn = { 46 template: '#cpn' 47 } 48 49 const app = new Vue({ 50 el: '#app', 51 data: { 52 message: 'hello 插槽' 53 }, 54 components: { 55 cpn 56 } 57 }) 58 </script> 59 </body> 60 </html>
页面展示和不使用插槽默认值是相同的。
三、具名插槽(实现标题一种的内容)
当一个组件中有多个插槽,那么在父组件view层Html中使用的子组件时,如何填写插槽内容。思路:给插槽命名,然后使用时,通过slot属性指定命名。
代码如下:
1 <!-- 2 @author:invoker 3 @project:project_lianxi 4 @file: 02-具名插槽.html 5 @contact:invoker2021@126.com 6 @descript: 7 @Date:2021/7/5 10:24 8 @version: html5 9 --> 10 11 <!DOCTYPE html> 12 <html lang="en"> 13 <head> 14 <meta charset="UTF-8"> 15 <title>02-具名插槽</title> 16 </head> 17 <body> 18 <div id="app"> 19 <h2>{{ message }}</h2> 20 <cpn1> 21 <span slot="left">返回</span> 22 <span slot="center">运费估算</span> 23 <span slot="right">查询</span> 24 </cpn1> 25 <cpn1> 26 <span slot="left">个人中心</span> 27 <span slot="center">XX门店</span> 28 <span slot="right">空</span> 29 </cpn1> 30 <cpn1> 31 <span slot="left">返回</span> 32 <span slot="center">XX门店</span> 33 <span slot="right">搜索</span> 34 </cpn1> 35 </div> 36 37 <template id="cpn1"> 38 <div> 39 <h2>我是子组件1</h2> 40 <slot name="left">左边</slot> 41 <slot name="center">中间</slot> 42 <slot name="right">右边</slot> 43 </div> 44 </template> 45 <script src="../js/vue.js"></script> 46 <script> 47 const cpn1 = { 48 template: '#cpn1' 49 } 50 51 const app = new Vue({ 52 el: '#app', 53 data: { 54 message: 'hello' 55 }, 56 components: { 57 cpn1 58 } 59 }) 60 </script> 61 </body> 62 </html>
实现情况:
本文来自博客园,作者:kaer_invoker,转载请注明原文链接:https://www.cnblogs.com/invoker2021/p/14971062.html