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