$ref & $nextTick

vue3.0

vue3.0中不能使用$ref获取Dom
$nextTick 改为 nextTick函数 需要vue中引入

import {ref} from 'vue'
export default {
  setup(){
    //<xx ref='box'>
    // 类$refs获取节点, 必须return出去
    let box = ref(null)
    nextTick(()=>{
      console.log(box.value.innerHTML);
    })
    //如果是typescript 
    let box = ref<HTMLElement | null>(null)
    nextTick(()=>{
      console.log(box.value?.innerHTML);
    })
    //<xx ref='loginC'>
    //(组件也一样)
    let loginC = ref(null) 
    return {sum,box}
        }
}

vue3.2

(代替$ref) defineExpose 获取子组件中的属性值

子组件 defineExpose暴露

<script lang="ts" setup>
import { reactive, ref ,defineExpose } from "vue";
let sex=ref('男')
let info=reactive({
    like:'喜欢李诗晴',
    age:27
})
// 将组件中的属性暴露出去，这样父组件可以获取
defineExpose({
    sex,
    info
})
</script>

父组件 ref接收

<template>
<div class="home">
  <HelloWorld ref="testRef"></HelloWorld>
  <button @click="getSonHander">获取子组件中的数据</button>
  </div>
</template>
<script lang="ts" setup>
  import test from '@/components/test.vue';
  import {ref} from 'vue'
  //类似$ref获取组件节点
  const testRef = ref()
  const getSonHander=()=>{
    console.log('获取子组件中的性别', testRef.value.sex );
    console.log('获取子组件中的其他信息', testRef.value.info );
  }
</script>