动态组件
- 正常组件在声明后,需要使用,使用谁就渲染谁的模板
- 组件在加载时候,不确定加载谁
- 在使用组件的时候,不直接使用组件名称,使用 component标签进行渲染组件
- 并给该标签设置属性 :is="组件名"
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
9</head>
10<body>
11 <div id="app">
12 <button @click="fun('demo1')">国际新闻</button>
13 <button @click="fun('demo2')">娱乐新闻</button>
14 <button @click="fun('demo3')">八卦新闻</button>
15 <button @click="fun('demo4')">体育新闻</button>
16 <!-- :is后需要是一个变量 -->
17 <component :is="val"></component>
18 </div>
19</body>
20<template id="demo1">
21 <div>
22 <ul>
23 <li>今天疫情都挺好</li>
24 <li>今天疫情都挺好</li>
25 <li>今天疫情都挺好</li>
26 <li>今天疫情都挺好</li>
27 </ul>
28 </div>
29</template>
30<template id="demo2">
31 <div>
32 <ul>
33 <li>今天疫情都挺好2</li>
34 <li>今天疫情都挺好2</li>
35 <li>今天疫情都挺好2</li>
36 <li>今天疫情都挺好2</li>
37 </ul>
38 </div>
39</template>
40<template id="demo3">
41 <div>
42 <ul>
43 <li>今天疫情都挺好3</li>
44 <li>今天疫情都挺好3</li>
45 <li>今天疫情都挺好3</li>
46 <li>今天疫情都挺好3</li>
47 </ul>
48 </div>
49</template>
50<template id="demo4">
51 <div>
52 <ul>
53 <li>今天疫情都挺好4</li>
54 <li>今天疫情都挺好4</li>
55 <li>今天疫情都挺好4</li>
56 <li>今天疫情都挺好4</li>
57 </ul>
58 </div>
59</template>
60<script>
61 new Vue({
62 el:"#app",
63 data:{
64 val:"demo1"
65 },
66 methods:{
67 fun(v){
68 this.val = v;
69 }
70 },
71 components:{
72 'demo1':{
73 template:"#demo1"
74 },
75 'demo2':{
76 template:"#demo2"
77 },
78 'demo3':{
79 template:"#demo3"
80 },
81 'demo4':{
82 template:"#demo4"
83 }
84 }
85 })
86</script>
87</html>
- 运行效果:
插槽
1插槽:可以让组件更灵活,就是可以决定组件中出现什么内容
21.定义:
3在组件中使用slot作为占位符(插槽位置)
42.使用(将什么东西插入到插槽中):
5需要在使用组件的时候,在组件标签中间设置你要插入东西
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>Document</title>
9 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
10</head>
11
12<body>
13 <div id="app">
14 <demo>
15 <div style="background-color: lightpink;">我是首页</div>
16 </demo>
17 <h1>我是插槽</h1>
18 <demo>
19 <div style="background-color: limegreen;">插槽页面</div>
20 </demo>
21 </div>
22</body>
23<template id="demo">
24 <div>
25 <!--头部 -->
26 <div style="background-color: lightcoral;">头部</div>
27 <slot></slot>
28 <div style="background-color: lightgoldenrodyellow;">尾部</div>
29 </div>
30</template>
31<script>
32
33 new Vue({
34 el: '#app',
35 data: {},
36 components: {
37 'demo': {
38 template: '#demo'
39 }
40 }
41 })
42</script>
43
44</html>
- 运行效果:
具名插槽
1具名插槽:就是有名字的插槽,就是可以把不同的内容插入到不同的位置
2 在定义插槽的位置给插槽命名
3 <组件名>
4 <元素 slot="n1"></元素>
5 <元素 slot="n2"></元素>
6 <元素 slot="n3"></元素>
7 </组件名>
8 <slot name="n1"></slot>
9 <slot name="n2"></slot>
10 <slot name="n3"></slot>
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>Document</title>
9 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
10</head>
11
12<body>
13 <div id="app">
14 <demo>
15 <img src="https://img2.baidu.com/it/u=534486318,1094186657&fm=26&fmt=auto&gp=0.jpg" alt="" slot="logo">
16 <div slot='main' style="background-color: mediumseagreen;">主体</div>
17 </demo>
18 <hr>
19 <demo>
20 <h3 slot="person">个人中心</h3>
21 </demo>
22 </div>
23</body>
24<template id="demo">
25 <div>
26 <div>
27 <slot name="logo"></slot>
28 头
29 </div>
30 <slot name="main"></slot>
31 <div>
32 尾
33 </div>
34 <slot name="person"></slot>
35 </div>
36</template>
37<script>
38 new Vue({
39 el: '#app',
40 data: {},
41 components: {
42 'demo': {
43 template: '#demo'
44 }
45 }
46 })
47</script>
48
49</html>
- 运行效果:
