Vue插槽和Vue过渡动画

一、Vue的插槽

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

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

3、插槽的使用

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

演示：

Son.vue代码段：

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

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

<style scoped>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Father.vue代码段：

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

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

<style scoped>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

App.Vue代码段

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

<template>
  <Father/>
template>

1
2
3
4
5
6

3.2、具名插槽：当子组件的功能复杂时，子组件的插槽可能并非是一个。每个插槽给个名称

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

演示：

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Father.vue代码段：

<template>
<div>
  <Son>

    <template v-slot:top>
      <button>顶部按钮button><br/>
    template>
    <template v-slot:center>
      <input type="text"/>
    template>
    <template v-slot:bottom>
      <h2>具名插槽h2>
    template>
    <template v-slot:default>
      <button>匿名插槽button>
    template>
  Son>
div>
template>

<script>
import Son from './Son.vue'
export default {
  name: "Father",
  components: {
    Son
  }
}
script>

<style scoped>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

App.vue

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

<template>
  <Father/>
template>
1
2
3
4
5

3.3、作用域插槽：父组件在使用的时候可以替换slot插槽中的显示页面结构，但展示的数据还是来源于子组件。
a、子组件中定义：
b、父组件中使用：