首页 > 其他分享> 文章详细

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

2021-07-05 10:01:30 阅读：216 来源： 互联网

标签：------------------------ 12 cpn Vuejs 插槽 ---------------------------- 组件分割线

场景：在实际项目中，很多页面有相似的模块（组件）架构,比如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>

标签：------------------------,12,cpn,Vuejs,插槽,----------------------------,组件,分割线
来源： https://www.cnblogs.com/invoker2021/p/14971062.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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