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 中声明