Vue插槽和Vue过渡动画

最新推荐文章于 2024-04-17 13:09:28 发布

THER1881

最新推荐文章于 2024-04-17 13:09:28 发布

阅读量282

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/thwr1881/article/details/126306357

版权

本文详细介绍了Vue中的插槽机制，包括匿名插槽、具名插槽和作用域插槽，以及如何通过插槽增强组件的扩展性。同时，文章探讨了Vue的过渡动画，讲解了transition组件的使用，包括不同阶段的CSS类名，互斥动画的实现，以及动画过程中的监听回调。最后，提到了列表过渡动画的应用及其注意事项。

摘要由CSDN通过智能技术生成

一、Vue的插槽

1、插槽(slot)：将父组件中的内容与子组件的模板进行混合使用。可以弥补视图的不足。

2、使用插槽的目的：使组件更具有扩展性。

3、插槽的使用

3.1、匿名插槽(默认插槽)：<slot></slot>有且只能有一个

演示：

Son.vue代码段：

<template>
<div>
  <h2>子组件</h2>
  <p>西安</p>
  <slot></slot>
</div>
</template>

<script>
export default {
     
  name: "Son"
}
</script>

<style scoped>

</style>

Father.vue代码段：

<template>
<div>
  <son>
    <button>演示按钮</button>
  </son>
</div>
</template>

<script>
export default {
     
  name: "Father"
}
</script>

<style scoped>

</style>

App.Vue代码段

import Father from "./components/Father.vue";

<template>
  <Father/>
</template>

在这里插入图片描述
3.2、具名插槽：当子组件的功能复杂时，子组件的插槽可能并非是一个。每个插槽给个名称

a、子组件中定义插槽：<slot name="名称"></slot>
b、父组件中使用插槽：<template v-slot:"插槽名"></template>

演示：

Son.vue代码段：

<template>
<div>
  <slot name="top"></slot>
  <slot name="center"></slot>
  <slot name="bottom"></slot>
  <slot></slot>
</div>
</template>

<script>
export default {
     
  name: "Son"
}
</script>

<style scoped>

</style>

Father.vue代码段：

<template>
<div>
  <Son>
<!--    <button>演示按钮</button>-->
    <template v-slot:top>
      <button>顶部按钮</button><br/>
    </template>
    <template v-slot:<