Vue-内置的组件

• component
• transition
• transition-group
• keep-alive
• slot

<template>
  <div>
    <div>
      <a @click="changeType('Animal')">动物</a>
      <a @click="changeType('Plant')">植物</a>
    </div>
    <div style="margin: 2em">
      <keep-alive>
        <transition name="fade" mode="out-in">
          <component :is="type"></component>
        </transition>
      </keep-alive>
    </div>
  </div>
</template>
<script>

const Cat = {
  template: '<div>猫猫</div>'
}

const Dog = {
  template: '<div>狗狗</div>'
}

const Animal = {
  template: '<div style="display: flex; align-items: center"><ul style="margin-right: 1em"><li><a @click="changeAnimal(\'Cat\')">猫</a></li><li><a @click="changeAnimal(\'Dog\')">狗</a></li></ul><component :is="type"></component></div>',
  components: {
    Dog,
    Cat
  },
  data() {
    return {
      type: 'Cat'
    }
  },
  methods: {
    changeAnimal(type) {
      this.type = type
    }
  }
}

const Plant = {
  template: '<div>花花草草</div>'
}

export default {
  name: 'BuiltInComponents',
  components: {
    Plant,
    Animal
  },
  data() {
    return {
      type: 'Animal',
    }
  },
  methods: {
    changeType(type) {
      this.type = type
    }
  }
}
</script>
<style>

li a {
  color: #03A9F3
}
div>a {
  border: 1px solid #eee;
  padding: 1em;
}
a {
  cursor: pointer
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>