vue3--模板引用的概念

模板引用的概念

通过 ref标识 获取真实的 dom对象或者组件实例对象

<script setup>

import TextCom from '@/components/text-com.vue';
import {onMounted, ref} from 'vue'

// 模板引用（获取dom和组件）
// 1. 调用ref函数生成一个ref对象
// 2. 通过ref标识绑定ref对象到标签
// 3.通过ref对象的.value即可访问绑定的元素

const inp = ref(null)
// console.log(inp.value)//不能获取，必须要在组件挂载完成之后才能引用


// 生命周期钩子
onMounted(()=>{
  // console.log(inp.value)
  // 一进入页面就聚焦
  // inp.value.focus()
})

// 点击按钮聚焦
const clickFn=()=>{
   inp.value.focus()
}


</script>
<template>
  <div>
   <input ref="inp" type="text" name="" id="">
    <button @click="clickFn">点击让我们的输入框聚焦</button>
  </div>
  <TextCom ></TextCom>

</template>

想要 获取组件   打印出<TextCom>组件

想要打印出来，第一步创建一个ref对象，第二步跟这个组件做一个关联

<script setup>

import TextCom from '@/components/text-com.vue';
import { ref} from 'vue'

// 模板引用（获取dom和组件）
// 1. 调用ref函数生成一个ref对象
// 2. 通过ref标识绑定ref对象到标签
// 3.通过ref对象的.value即可访问绑定的元素

// 获取组件
//打印出<textCom>组件
// 想要打印出来，第一步创建一个ref对象，第二步跟这个组件做一个关联
const textRef= ref(null)
const getCom= ()=>{
  console.log(textRef.value);
}

</script>
<template>
  <div>
  </div>
  <TextCom ref="textRef"></TextCom>
  <button @click="getCom">获取组件</button>
</template>

<script setup>
const count =999
const sayhi= ()=>{
    console.log('打招呼');
}

// count和sayhi想要暴露出去必须使用宏函数(defineExpose()),才能访问其中的属性
// 默认情况下在<script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的，
// 可以通过defineExpose编译宏指定哪些属性和方法允许访问
defineExpose({
    count,
    sayhi
})
</script>
<template>
  <div>
   组件---{{ count }}----{{sayhi}}
  </div>
</template>