高级vue 模板中 ref 的使用用法

1. ref + 普通dom标签  获取真实dom对象
2. ref + 组件标签  获取组件实例对象

 

<template>

    <h1 ref="h1Ref">www.96net.com.cn</h1>

    <ref-comoonent ref="comRef"></ref-comoonent>

  </template>

 

  <script>

  import { onMounted, ref } from 'vue'

  export default {

    setup() {

      const h1Ref = ref(null)

      const comRef = ref(null)

      onMounted(() => {

        console.log(h1Ref.value)

        console.log(comRef.value)

      })

      // 必须return

      return {

        h1Ref,

        comRef

      }

    }

  }

  </script>