vue 内置组件
1. component
在Vue中，内置组件 component 是一个动态地渲染不同组件的元素。它可以根据数据动态地选择要渲染的组件，并在渲染过程中动态地创建和销毁这些组件。
1 // 父组件
2 <template>
3 <h1>我是 APP 组件</h1>
4 <button @click=\"myId = \'my_com\'\">首页</button>
5 <button @click=\"myId = \'my_com2\'\">分类</button>
6 <button @click=\"myId = \'my_com3\'\">购物车</button>
7 <button @click=\"myId = \'my_com4\'\">个人页</button>
8
9 <component :is=\"myId\"></component>
10 </template>
11
12 <script>
13 import my_com from \'./components/my_com.vue\'
14 import my_com2 from \'./components/my_com2.vue\'
15 import my_com3 from \'./components/my_com3.vue\'
16 import my_com4 from \'./components/my_com4.vue\'
17 export default {
18 data() {
19 return {
20 myId: \'my_com\'
21 }
22 },
23 components: {
24 my_com,
25 my_com2,
26 my_com3,
27 my_com4,
28 }
29 }
30 </script>
31
32 // my_com 子组件
33 <template>
34 <h4 style=\"color: red;\">我是首页部分</h4>
35 <input type=\"text\">
36 </template>
37
38 // my_com2 子组件
39 <template>
40 <h4 style=\"color: green\">我是分类部分</h4>
41 <input type=\"text\" />
42 </template>
43
44 // my_com3 子组件
45 <template>
46 <h4 style=\"color: blue;\">我是购物车部分</h4>
47 <input type=\"text\">
48 </template>
49
50 // my_com4 子组件
51 <template>
52 <h4 style=\"color: purple;\">我是个人页部分</h4>
53 <input type=\"text\" />
54 </template>
55
2. keep-alive
1 // 父组件
2 <template>
3 <h1>我是 APP 组件</h1>
4 <button @click=\"myId = \'my_com\'\">首页</button>
5 <button @click=\"myId = \'my_com2\'\">分类</button>
6 <button @click=\"myId = \'my_com3\'\">购物车</button>
7 <button @click=\"myId = \'my_com4\'\">个人页</button>
8 <!--
9 keep-alive 内置组件
10 内部可以书写多个组件，可以让内部书写的所有组件，全部具有缓存性
11 也就组件切换后，对组件内部的一些操作，会被保留下来
12 当前组件 还有两个属性，两个属性值是一个数组
13 inclode, 内部包含具备缓存性的组件名
14 exclode, 内部不包含具有缓存性的组件名
15
16 组件名需要是 组件内部书写 name 属性
17 -->
18 <keep-alive :include=\"[\'my_com\',\'my_com4\']\">
19 <component :is=\"myId\"></component>
20 </keep-alive>
21 </template>
22
23 <script>
24 import my_com from \'./components/my_com.vue\'
25 import my_com2 from \'./components/my_com2.vue\'
26 import my_com3 from \'./components/my_com3.vue\'
27 import my_com4 from \'./components/my_com4.vue\'
28 export default {
29 data() {
30 return {
31 myId: \'my_com\'
32 }
33 },
34 components: {
35 my_com,
36 my_com2,
37 my_com3,
38 my_com4,
39 }
40 }
41 </script>
42
43 // my_com 子组件
44 <template>
45 <h4 style=\"color: red;\">我是首页部分</h4>
46 <input type=\"text\">
47 </template>
48 <script>
49 export default{
50 name: \'my_com\'
51 }
52 </script>
53
54 // my_com2 子组件
55 <template>
56 <h4 style=\"color: green\">我是分类部分</h4>
57 <input type=\"text\" />
58 </template>
59 <script>
60 export default{
61 name: \'my_com2\'
62 }
63 </script>
64
65 // my_com3 子组件
66 <template>
67 <h4 style=\"color: blue;\">我是购物车部分</h4>
68 <input type=\"text\">
69 </template>
70 <script>
71 export default{
72 name: \'my_com3\'
73 }
74 </script>
75
76 // my_com4 子组件
77 <template>
78 <h4 style=\"color: purple;\">我是个人页部分</h4>
79 <input type=\"text\" />
80 </template>
81 <script>
82 export default{
83 name: \'my_com4\'
84 }
85 </script>
86
3. Transition
Vue的Transition是Vue.js提供的一种动画效果管理工具，用于在元素进入或离开DOM时添加动画效果。通过Transition组件，你可以为元素的进入和离开过程分别定义动画效果，比如淡入淡出、滑动等。Transition组件可以包裹任意元素或组件，并通过设置不同的属性来控制动画的行为。
Transition组件的主要属性包括：
- name：指定动画效果的名称，用于在CSS中定义对应的动画样式。
- appear：指定是否在初始渲染时触发动画效果。
- duration：指定动画的持续时间。
- mode：指定动画模式，可以是"in-out"、"out-in"或默认的"out-in"。
通过使用Transition组件，你可以轻松地为Vue应用中的元素添加动画效果，使用户体验更加丰富和生动。
1 // 代码演示
2 <template>
3 <button @click=\"flag = !flag\">隐藏/展示 p 标签</button>
4 <Transition>
5 <p v-if=\"flag\">飞流直下三千尺，疑是银河落九天</p>
6 </Transition>
7 </template>
8
9 <script>
10 export default {
11 data() {
12 return {
13 flag: false
14 }
15 }
16 }
17 </script>
18
19 <style scoped>
20 .v-enter-active,
21 .v-leave-active {
22 transition: opacity 0.5s ease;
23 }
24
25 .v-enter-from,
26 .v-leave-to {
27 opacity: 0;
28 }
29 </style>
30
4. Teleport
Vue的Teleport是Vue.js 3.x版本新增的特性，它允许你将组件的内容渲染到DOM中的任何位置，而不受组件层次结构的限制。通过Teleport，你可以将组件的内容渲染到DOM中的任意位置，比如body元素下面，这样可以在组件内部实现全局级别的渲染，而不需要改变组件的层次结构。
Teleport使用一个特殊的 <teleport> 标签来包裹要渲染的内容，然后通过 to 属性指定要渲染到的目标位置，可以是CSS选择器、DOM元素或Vue组件的引用。这样，无论组件在DOM中的位置如何变化，渲染的内容都会被移动到指定的目标位置。
例如，下面是一个使用Teleport的示例：
1<template>
2 <teleport to=\"body\">
3 <div v-show=\"showModal\" class=\"modal\">
4 <!-- modal content -->
5 </div>
6 </teleport>
7 <button @click=\"showModal = !showModal\">Toggle Modal</button>
8</template>
9
10<script>
11export default {
12 data() {
13 return {
14 showModal: false
15 };
16 }
17};
18</script>
19
在这个示例中， <div class=\"modal\"> 的内容会被渲染到body元素下面，而不是组件自身的位置。这样可以实现全局级别的渲染，而不需要改变组件的层次结构。
总之，Teleport是Vue.js 3.x中非常有用的特性，它可以帮助你更灵活地控制组件的渲染位置，提高了组件的复用性和灵活性。
相关笔记