REF的使用

ref 可以用来在 vue 组件实例中获取原生DOM，也可以获取 vue 组件。

获取原生 DOM

步骤

• 创建 ref： const hRef = ref(null)
• 模板中和原生 DOM 建立关联： <h1 ref="hRef">我是标题</h1>
• 使用： hRef.value.原生DOM属性

<script setup>
// 引入 watch
import { ref } from "vue";

const count = ref(0)

// 定义原生DOM容器
const hRef = ref(null)
// 获取原生DOM
const getH1 = () => {
  console.log(hRef.value)
}

// 定义原生DOM容器
const inputRef = ref(null)
// 获取原生DOM
const setFocus = () => {
  inputRef.value.focus()
}

</script>

<template>
  <div>
    <!-- 关联原生DOM -->
    <h1 ref="hRef">{{count}}</h1>
    <button @click="count++">count++</button>
    <input ref="inputRef" type="text" />
    <hr/>
    <button @click="getH1">获取h1</button>
    <button @click="setFocus">设置焦点</button>
  </div>
</template>

 

总结

获取原生 DOM 的场景，当我们无法通过某一个属性控制一些组件时，原因是我们无法定义一个响应式数据和这个状态关联。此时我们可以通过获取原生 DOM 来完成产品需求。

获取自定义组件实例

步骤和获取原生 DOM 相似，不同点是自定义组件要显示定义要暴露的方法和属性。

步骤

• 创建 ref： const testRef = ref(null)
• 模板中和原生自定义组件建立关联： <Test ref="testRef" />
• 自定义组件中使用 defineExpose 函数暴露对外的属性
• 使用： testRef.value.自定义组件暴露的属性

• 自定义组件

 

<script setup>

import { ref } from "vue";

// 自定义组件的数据
const testData = ref(0)

// 自定义组件的函数
const testFn = () => {
  console.log(testData.value>3? '大于3': '小于等于3')
}

// 通过 defineExpose 对外暴露属性
defineExpose({testData, testFn})
</script>

<template>
    <div>我是一个自定义组件{{testData}}</div>
    <button @click="testData++">+1</button>
</template>

 父组件中获取自定义组件

 

<script setup>
// 引入 watch
import { ref } from "vue";
import Test2 from "./components/Test2.vue";

const count = ref(0)

// 定义原生DOM容器
const hRef = ref(null)
// 获取原生DOM
const getH1 = () => {
  console.log(hRef.value)
}
// 定义原生DOM容器
const inputRef = ref(null)
// 获取原生DOM
const setFocus = () => {
  inputRef.value.focus()
}

// 定义自定义组件容器
const testRef = ref(null)
// 获取自定义组件
const getTest = () => {
  console.log(testRef.value.testData)
  testRef.value.testFn()
}

</script>

<template>
  <div>
    <!-- 关联原生DOM -->
    <h1 ref="hRef">{{count}}</h1>
    <button @click="count++">count++</button>
    <input ref="inputRef" type="text" />
    <hr/>
    <button @click="getH1">获取h1</button>
    <button @click="setFocus">设置焦点</button>
    <hr/>
    <!-- 关联自定义组件 -->
    <Test2 ref="testRef" />
    <button @click="getTest">获取自定义组件</button>
  </div>
</template>

 

总结

defineExpose 不需要导入可以直接使用

要想自定义组件中的属性对外暴露一定要在 defineExpose 中声明