Vue提供了一些内置的组件,这些组件可以在Vue应用中直接使用,无需额外安装或配置。以下是一些常见的Vue内置组件
一、<transition> 和 <transition-group>
1、概念
<transition> 组件用于在元素插入或移除时应用过渡效果,例如淡入淡出、滑动等效果。<transition-group> 组件用于在多个元素同时插入或移除时应用过渡效果,并为每个元素添加唯一的过渡类名。这些组件提供了丰富的过渡效果和过渡钩子函数,使得在Vue应用中实现动画效果变得更加容易
2、参数
name 属性
name 属性用于指定过渡的名称,它在定义过渡样式和钩子函数时非常有用。通过为过渡样式类名添加 name 的前缀,可以确保不同过渡之间的样式不会相互冲突。同时,name 也用于在过渡钩子函数中标识当前过渡的名称,以便在需要时进行特定处理。
tag 属性
tag 属性用于指定过渡组件渲染的标签。默认情况下,<transition> 组件渲染为一个 span 标签,而 <transition-group> 组件渲染为一个 span 包裹的 span 标签。通过设置 tag 属性,你可以指定渲染为其他的标签,如 div、ul、ol 等,以满足你的实际需求
3、例子
<template>
<div>
<button @click="addItem">Add Item</button>
<button @click="removeItem">Remove Item</button>
<transition-group name="a" tag="ul">
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</transition-group>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, text: "Item 1" },
{ id: 2, text: "Item 2" },
{ id: 3, text: "Item 3" },
],
nextId: 4,
};
},
methods: {
addItem() {
this.items.push({ id: this.nextId, text: `Item ${this.nextId}` });
this.nextId++;
},
removeItem() {
this.items.pop();
},
},
};
</script>
<style>
/*
激活时的过渡效果
a 为 name定义的值
-enter-active这部分写死
过渡效果需要自己写
*/
.a-enter-active,
.a-leave-active {
transition: opacity 0.5s;
}
.a-enter,
.a-leave-to {
opacity: 0;
}
</style>
二、<component>
1、概念
<component> 组件用于动态地渲染组件,根据不同的条件或数据选择性地渲染不同的组件。它可以接收一个组件的名称或组件对象,并根据指定的组件动态地渲染内容
2、参数
is
is 属性是 <component> 组件的一个特殊属性,用于指定要渲染的组件或组件的名称。
通过使用 is 属性,我们可以实现动态组件的渲染,即根据数据的变化在运行时选择不同的组件进行渲染。这对于根据用户的操作或其他条件切换不同的视图非常有用
3、例子
根据选择动态渲染对应的组件
<template>
<div>
<select v-model="selectedComponent">
<option value="ComponentA">Component A</option>
<option value="ComponentB">Component B</option>
<option value="ComponentC">Component C</option>
</select>
<component :is="selectedComponent"></component>
</div>
</template>
<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
import ComponentC from './ComponentC.vue';
export default {
data() {
return {
selectedComponent: 'ComponentA'
};
},
components: {
ComponentA,
ComponentB,
ComponentC
}
}
</script>
三、<keep-alive>
1、概念
组件用于缓存动态组件,以便在组件切换时保留其状态或避免重新渲染。它会缓存被包裹的组件的实例,并在组件切换时保持实例的状态,以提高应用的性能和响应性
2、参数
include缓存name为xxx的组件
exclude不缓存name为xxx的组件
3、例子
<template>
<div>
<select v-model="selectedComponent">
<option value="ComponentA">Component A</option>
<option value="ComponentB">Component B</option>
<option value="ComponentC">Component C</option>
</select>
<keep-alive>
<component :is="selectedComponent"></component>
</keep-alive>
</div>
</template>
<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
import ComponentC from './ComponentC.vue';
export default {
data() {
return {
selectedComponent: 'ComponentA'
};
},
components: {
ComponentA,
ComponentB,
ComponentC
}
}
</script>
4、相关生命周期
export default {
activated() {
// activated 每次进入缓存也都都会执行
},
deactivated() {
// 缓存组件被销毁时调用
}
}
四、<Teleport>
1、概念
它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。这类场景最常见的例子就是全屏的模态框
2、参数
to
指定传送的目标。to 的值可以是一个 CSS 选择器字符串,也可以是一个 DOM 元素对象。
3、例子
<button @click="open = true">Open Modal</button>
<Teleport to="body">
<div v-if="open" class="modal">
<p>Hello from the modal!</p>
<button @click="open = false">Close</button>
</div>
</Teleport>
五、<slot>
插糟同插槽那节课
六、<router-view> 和 <router-link>
<router-view> 组件用于在Vue路由中渲染匹配到的组件,根据当前的路由状态动态地渲染对应的组件内容。<router-link> 组件用于生成路由链接,提供了一种声明式的方式来导航到不同的路由