在composition API中使用元素的ref

自动摘要

正在生成中……

在composition API中使用元素的ref ，注意DOM元素要在初始渲染后才分配给ref，因此不能直接在setup开始时就获取其值，因为此时模板还没完成渲染，下面的示例写在onMounted的hook中

<template>
  <div class="home">
    <transition name="toast">
      <Toast v-if="showToast" />
    </transition>
    <Todos @badValue="triggerToast" />

    <p ref="p">这是P标签在composition API的用法</p>
  </div>
  
</template>

<script>
import { onMounted, ref } from 'vue'
import Toast from '../components/Toast'
import Todos from '../components/Todos'

export default {
  
  components: { Toast, Todos },
  setup() {
    
    const p =ref(null) //需要先定义
    const showToast = ref(false)
    
    const triggerToast = () => {
      showToast.value = true;
      console.log(p.value) // 在事件中触发
      setTimeout(() => showToast.value = false, 2000)
    }    
   
   onMounted( ()=>{
     console.log(p.value)         // DOM元素将在初始渲染后分配给ref
   })

    return { showToast, triggerToast ,p}
  }
}
</script>

<style>

.toast-enter-active {  
  animation: wobble 0.5s ease; 
}

.toast-leave-from{
  transform: translateY(0);
}
.toast-leave-to{
  transform: translateY(-60px);
}
.toast-leave-active {    
  transition: all .3s ease
}

@keyframes wobble {
  0% {transform: translateY(-60px) ; opacity:0;}
  50% {transform: translateY(0) ; opacity:1;}
  60% {transform: translateX(18px) ; }
  70% {transform: translateX(-18px) ; }
  80% {transform: translateX(4px) ; }
  90% {transform: translateX(-4px) ; }
  100% {transform: translateX(0) ; }

}

</style>

参考：在组合式 API 中使用 template refs