1. component
在Vue中，内置组件component是一个动态地渲染不同组件的元素。它可以根据数据动态地选择要渲染的组件，并在渲染过程中动态地创建和销毁这些组件。
js
// 父组件
<template>
<h1>我是 APP 组件</h1>
<button @click="myId = 'my_com'">首页</button>
<button @click="myId = 'my_com2'">分类</button>
<button @click="myId = 'my_com3'">购物车</button>
<button @click="myId = 'my_com4'">个人页</button>
<component :is="myId"></component>
</template>
<script>
import my_com from './components/my_com.vue'
import my_com2 from './components/my_com2.vue'
import my_com3 from './components/my_com3.vue'
import my_com4 from './components/my_com4.vue'
export default {
data() {
return {
myId: 'my_com'
}
},
components: {
my_com,
my_com2,
my_com3,
my_com4,
}
}
</script>
// my_com 子组件
<template>
<h4 style="color: red;">我是首页部分</h4>
<input type="text">
</template>
// my_com2 子组件
<template>
<h4 style="color: green">我是分类部分</h4>
<input type="text" />
</template>
// my_com3 子组件
<template>
<h4 style="color: blue;">我是购物车部分</h4>
<input type="text">
</template>
// my_com4 子组件
<template>
<h4 style="color: purple;">我是个人页部分</h4>
<input type="text" />
</template>2.keep-alive
js
// 父组件
<template>
<h1>我是 APP 组件</h1>
<button @click="myId = 'my_com'">首页</button>
<button @click="myId = 'my_com2'">分类</button>
<button @click="myId = 'my_com3'">购物车</button>
<button @click="myId = 'my_com4'">个人页</button>
<!--
keep-alive 内置组件
内部可以书写多个组件，可以让内部书写的所有组件，全部具有缓存性
也就组件切换后，对组件内部的一些操作，会被保留下来
当前组件 还有两个属性，两个属性值是一个数组
inclode, 内部包含具备缓存性的组件名
exclode, 内部不包含具有缓存性的组件名
组件名需要是 组件内部书写 name 属性
-->
<keep-alive :include="['my_com','my_com4']">
<component :is="myId"></component>
</keep-alive>
</template>
<script>
import my_com from './components/my_com.vue'
import my_com2 from './components/my_com2.vue'
import my_com3 from './components/my_com3.vue'
import my_com4 from './components/my_com4.vue'
export default {
data() {
return {
myId: 'my_com'
}
},
components: {
my_com,
my_com2,
my_com3,
my_com4,
}
}
</script>
// my_com 子组件
<template>
<h4 style="color: red;">我是首页部分</h4>
<input type="text">
</template>
<script>
export default{
name: 'my_com'
}
</script>
// my_com2 子组件
<template>
<h4 style="color: green">我是分类部分</h4>
<input type="text" />
</template>
<script>
export default{
name: 'my_com2'
}
</script>
// my_com3 子组件
<template>
<h4 style="color: blue;">我是购物车部分</h4>
<input type="text">
</template>
<script>
export default{
name: 'my_com3'
}
</script>
// my_com4 子组件
<template>
<h4 style="color: purple;">我是个人页部分</h4>
<input type="text" />
</template>
<script>
export default{
name: 'my_com4'
}
</script>3. Transition
Vue的Transition是Vue.js提供的一种动画效果管理工具，用于在元素进入或离开DOM时添加动画效果。通过Transition组件，你可以为元素的进入和离开过程分别定义动画效果，比如淡入淡出、滑动等。Transition组件可以包裹任意元素或组件，并通过设置不同的属性来控制动画的行为。
Transition组件的主要属性包括：
- name：指定动画效果的名称，用于在CSS中定义对应的动画样式。
- appear：指定是否在初始渲染时触发动画效果。
- duration：指定动画的持续时间。
- mode：指定动画模式，可以是"in-out"、"out-in"或默认的"out-in"。
通过使用Transition组件，你可以轻松地为Vue应用中的元素添加动画效果，使用户体验更加丰富和生动。
js
// 代码演示
<template>
<button @click="flag = !flag">隐藏/展示 p 标签</button>
<Transition>
<p v-if="flag">飞流直下三千尺，疑是银河落九天</p>
</Transition>
</template>
<script>
export default {
data() {
return {
flag: false
}
}
}
</script>
<style scoped>
.v-enter-active,
.v-leave-active {
transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
</style>4.Teleport
Vue的Teleport是Vue.js 3.x版本新增的特性，它允许你将组件的内容渲染到DOM中的任何位置，而不受组件层次结构的限制。通过Teleport，你可以将组件的内容渲染到DOM中的任意位置，比如body元素下面，这样可以在组件内部实现全局级别的渲染，而不需要改变组件的层次结构。
Teleport使用一个特殊的<teleport>标签来包裹要渲染的内容，然后通过to属性指定要渲染到的目标位置，可以是CSS选择器、DOM元素或Vue组件的引用。这样，无论组件在DOM中的位置如何变化，渲染的内容都会被移动到指定的目标位置。
例如，下面是一个使用Teleport的示例：
xml
<template>
<teleport to="body">
<div v-show="showModal" class="modal">
<!-- modal content -->
</div>
</teleport>
<button @click="showModal = !showModal">Toggle Modal</button>
</template>
<script>
export default {
data() {
return {
showModal: false
};
}
};
</script>在这个示例中，<div class="modal">的内容会被渲染到body元素下面，而不是组件自身的位置。这样可以实现全局级别的渲染，而不需要改变组件的层次结构。
总之，Teleport是Vue.js 3.x中非常有用的特性，它可以帮助你更灵活地控制组件的渲染位置，提高了组件的复用性和灵活性。