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>

实现情况：

posted @ 2021-07-05 10:00 kaer_invoker 阅读(212) 评论(0) 收藏举报

刷新页面返回顶部

知行合一

Vuejs学习笔记(二)-12.组件插槽的使用