Vue模板引用

在vue中我们需要访问DOM元素，可以通过给元素添加ref从而获得它的引用

访问dom节点

通过给input元素添加ref，然后在script中声明一个同名的ref，这样可以获得input的引用。

注意：要在组件挂载后才能访问到模板引用，组件没挂载前这个元素还不存在。即要在onMounted钩子中才能访问到引用。

<template>
  <div id="d">
    <input type="text" ref="input" />
  </div>
</template>

<script setup>
import {ref,reactive, watch, onMounted,nextTick} from 'vue'
const input=ref(null); //同名的引用
onMounted(()=>{
  //input.value就是input元素，input.value.value就是框框里面的文字
  input.value.value="hello";
})
</script>

ref引用组件

可以在子组件中添加ref，然后得到子组件的引用

<script setup>
import { ref, onMounted } from 'vue'
import Child from './Child.vue'

const child = ref(null)
onMounted(() => {
  console.log(child.value);//这是Child组件实例
  console.log(child.value.a); //undefined
  //我们不能直接拿到子组件中的属性和方法，要通过在子组件中defineProps和defineEmits才能把属性和方法暴露出来
  //其实在子组件中defineExpose({a})这样可以把属性a暴露出来，但是这样是不安全的，并不推荐
})
</script>

<template>
  <Child ref="child" />
</template>

原生js操作dom

其实想要取得dom还可以用原生js获得，即document.getElementById()或document.getElementByClass()。这样也可以获得dom元素，但是在vue中推荐使用ref来获取dom元素。具体原因还不是很清楚。