Test.vue

<template>
  <div>
      <button @click="isShow=!isShow">显示/隐藏</button>
      <!-- appear一进场就触发动画 -->
      <transition name="hello" appear>
          <h1 v-show="isShow" class="come">你好啊!</h1>
      </transition>
  </div>
</template>

<script>
export default {
    name:'TestCase',
    data(){
        return {
            isShow:true
        }
    }
}
</script>

<style scoped>
    h1{
        background-color: orange;
    }
    /* 调用进入 */
    .hello-enter-active{
        animation: advance 1s;
    }
    /* 反转进入 */
    .hello-leave-active{
        animation: advance 1s reverse;
    }
    /* 进入动画 */
    @keyframes advance{
        from{
            transform: translateX(-100%);
        }
        to{
            transform: translateX(0px);
        }
    }
</style>

Test2.vue

<template>
  <div>
      <button @click="isShow=!isShow">显示/隐藏</button>
      <!-- appear一进场就触发动画 -->
      <transition-group name="hello" appear>
          <h1 v-show="!isShow" key="1">你好啊!</h1>
          <h1 v-show="isShow" key="2">hello</h1>
      </transition-group>
  </div>
</template>

<script>
export default {
    name:'TestCase2',
    data(){
        return {
            isShow:true
        }
    }
}
</script>

<style scoped>
    h1{
        background-color: orange;
    }
    /* 进入的起点,离开的终点 */
    .hello-enter,.hello-leave-to{
        transform: translateX(-100%);
    }
    /* 过渡效果 */
    .hello-enter-active,.hello-leave-active{
        transition: 3s linear;
    }
    /* 进入的终点,离开的起点 */
    .hello-enter-to,hello-leave{
        transform: translateX(0);
    }

</style>

Test3.vue

<template>
  <div>
      <button @click="isShow=!isShow">显示/隐藏</button>
      <!-- appear一进场就触发动画 -->
      <transition-group name="animate__animated animate__bounce" enter-active-class="animate__swing" leave-active-class="animate__backOutUp" appear>
          <h1 v-show="!isShow" key="1">你好啊!</h1>
          <h1 v-show="isShow" key="2">hello</h1>
      </transition-group>
  </div>
</template>

<script>
import 'animate.css';
export default {
    name:'TestCase3',
    data(){
        return {
            isShow:true
        }
    }
}
</script>

<style scoped>
    h1{
        background-color: orange;
    }

</style>

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <h1>{{msg}}</h1>
    <!-- 自定义监听事件 -->
    <!-- v-on写法 --><!--once只调用一次-->
    <student @excuse.once="getStudentName"></student>
    <!-- v-bind写法 -->
    <school :getSchoolName="getSchoolName"></school>
    <!-- ref写法 -->
    <teacher ref="go"></teacher>
    
  </div>
</template>

<script>
import School from './components/School.vue';
import Student from './components/Student.vue';
import Teacher from './components/Teacher.vue';

export default {
  name: 'App',
  components: {
    School,Student,Teacher
  },
  data() {
    return {
      msg: '你好啊',
    };
  },
  methods: {
    getSchoolName(name) {
      console.log('APp收到了School:'+name);
    },
    getStudentName(name){
      console.log('APp收到了Student:'+name);
    },
    getTeacherName(name,...other){//...other除了name以外的其他传参
      console.log('APp收到了Teacher:'+name+','+other);
    }
  },
  mounted() {
    //获取所有ref取出go再监听hi事件，当Teacher那边点击时就触发
    var self = this;
    setTimeout(() => {//延时绑定事件到getTeacherName方法
      self.$refs.go.$on('hi',this.getTeacherName);//绑定事件
      // self.$refs.go.$once('hi',this.getTeacherName);//一次性绑定事件
    }, 3000);
  },
  
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  background-color: powderblue;
  margin-top: 60px;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

const vm = new Vue({
  render: h => h(App),
}).$mount('#app');
console.log(vm.$children[0]);//输出App对象
console.log(vm.$children[0].$children[0]);//输出Student对象
console.log(vm.$children[0].$children[1]);//输出School对象