当前位置：首页 > news >正文

第十九节——vue内置组件

news 2025/7/27 21:13:11

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 属性是 <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 的值可以是一个 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>