[Vue] built in components

Time:2021-10-25

Built in components

  1. component
  2. transition
  3. transition-group
  4. keep-alive
  5. slot

1 component

props:isinline-template
You can render components dynamically based on the data
See in the previous chapter for detailsisattribute

2 transition

Wrap oneelementorDynamic component, implementationtransitionEffect of
Common element example

<template>
  <div id="app">
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">hello world</p>
    </transition>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      show: true,
    };
  },
};
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

Changingv-ifNot when the value ofDelete nowElement, because when inserted or deleted, it is contained intransitionFor the elements in the component, Vue will do the following

  1. Determine whether CSS is applied to the elementtransitionoranimation, add / delete at the right timeCSS class name
  2. If the transition component providesHook function, these hook functions will be called at the right time
  3. If there are no above two conditions, the DOM operation is in the next frameExecute now

2.1 attributes of transition

Name: automatically generate CSS transition class name
Appearance: whether to use transition during initial rendering
CSS: whether to use CSS transition class
Type: Specifies the type of transition event, when the listening transition ends, and transition | animation
Mode: control the time series of departure / entry transition, out in | in out
Duration: specify the duration of the transition, number | {enter: number, leave: number}

Add v-bind: CSS = “false” only using JS transition elements to skip CSS detection and avoid the influence of CSS in the transition process

2.2 transition class name

vDepending on the transitionnameattribute

v-enter: entering transitionstartstate

When the element isBefore insertionTakes effect when the element isAfter insertionNext frame removed

v-enter-active: enter transitiontake effectStatus at

Element isBefore insertionEffective onAfter transition / AnimationRemove.Transition process time, delay and curve functions can be defined

v-enter-to: entering transitionendstate

Element isAfter insertionThe next frame takes effect (remove v-enter), inTransition / animation completeRemove after

v-leave: leaving the transitionstartstate

The departure transition takes effect immediately when triggered, and the next frame is removed

v-leave-active: leaving the transitiontake effectStatus at

The exit transition takes effect immediately when triggered and is removed after the transition / animation is completed.You can define the process time, delay and curve function of leaving the transition

v-leave-to: leaving the transitionendstate

After the departure transition is triggered, the next frame takes effect (remove v-leave), which is removed after the transition / animation is completed

[Vue] built in components

2.3 hook function

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
</transition>

Must be used in enter and leavedoneCallback

See the official website for other information about Vue transition
Transition & Animation

3 transition-group

Multi component transition
Properties:

  • Tag: Specifies the label. The default is span
  • Move class: overrides the CSS class applied during the mobile transition
  • It is the same as transition except mode

The event is the same as transition
See the official website for detailsAnimation & Transition

4 keep-alive

Wrapping dynamic components will cache inactive component instances and will not be destroyed
attribute

  • Include: string|regexp, cache the specified component
  • Exclude: string|regexp, refuse to cache the specified component
  • Max: number, the maximum number of component instances that can be cached
//Sub assembly I
<template>
  <div>One</div>
</template>

<script>
export default {
  beforeDestroy() {
    Console.log ("destroy");
  },
};
</script>
//Sub assembly II
<template>
  <div>Two</div>
</template>

<script>
export default {
  beforeDestroy() {
    Console.log ("destroy");
  },
};
</script>
//Parent component
<template>
  <div id="app">
    < button: value = "component" @ Click = "component = 'one'" > component I < / button >
    < button: value = "component" @ Click = "component = 'two'" > component II < / button >
    <component :is="component"></component>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {
    One: () => import("./components/One.vue"),
    Two: () => import("./components/Two.vue"),
  },
  data() {
    return {
      component: "One",
    };
  },
  methods: {},
};
</script>

When you do not add keep alive, components will be switched directlyDestroyComponents transferred out

//Parent component
<keep-alive>
  <component :is="component"></component>
</keep-alive>
//Sub assembly I
<template>
  <div>One</div>
</template>

<script>
export default {
  beforeDestroy() {
    Console.log ("destroy");
  },
  activated() {
    Console.log ("enter one");
  },
  deactivated() {
    Console.log ("leave one");
  },
};
</script>
//Ditto for subassembly II

Using keep alive will add two life cycle hooks
activated: when switchingreturnCalled when a component
deactivated: when switchingOutCalled when a component

5 slot

Distribute as content in component templatesslot
attribute

  • Name: named slot
  • Binding value: scope slot

VM. $slots and VM. $scopedslots properties
V-slot instruction
Slot (default, named, scope)