vue3 内置的特殊属性ref

Vue 3 中的数据绑定是通过模板语法实现的。开发者可以在模板中使用特殊的语法来绑定数据，例如使用双花括号 {``{}} 来显示数据，或者使用 v-bind 指令来绑定属性。

当数据发生变化时，Vue 会自动更新绑定的数据在模板中的显示，实现页面的自动更新。

虽然 Vue 的响应式数据驱动模式非常强大，但有时直接访问底层 DOM 元素是必要的。

vue3 内置的特殊属性ref

ref 是一个特殊的 attribute，它允许在一个特定的 DOM 元素或子组件实例被挂载后，获得对它的直接引用。

ref 用于注册元素或子组件的引用。
ref参数类型：string | Function
- 当使用字符串作为参数时，这个字符串将作为引用的名称，可以在组件的逻辑部分通过this.$refs[refName]来访问对应的元素或组件实例。
- 当使用函数作为参数时，这个函数将在组件挂载后被调用，函数的参数是对应的元素或组件实例。

使用选项式 API，引用将被注册在组件的 `this.$refs` 对象里

html 复制代码

<!-- 存储为 this.$refs.p -->
<p ref="p">hello</p>

使用组合式 API，引用将存储在与名字匹配的 `ref` 里

用在普通`DOM`标签上，获取的是`DOM`节点

示例：

html 复制代码

<template>
  <div>
    <div ref="domDiv">hi, 这是有ref属性的div</div>
    <button @click="showLog">点击输出div</button>
  </div>
</template>

<script setup lang="ts" name="Person">
import { ref } from 'vue';

// 创建一个名为domDiv的响应式引用，用于存储ref标记的内容
let domDiv = ref()
// 初始化时立即打印，此时组件还未挂载，domDiv.value 必然为 undefined
console.log(domDiv.value)  // undefined


const showLog = () => {
  console.log(domDiv.value)
}

</script>

用在组件标签上，获取的是组件实例对象

在Parent.vue引用Child.vue：

html 复制代码

<template>
  <div>
    <Child ref="cihldRef" />
    <button @click="showChildRef">点击输出childRef</button>
  </div>
</template>

<script setup lang="ts" name="Person">
import { ref } from 'vue';
import Child from './Child.vue';
// 
let cihldRef = ref()
const showChildRef = () => {
  console.log(cihldRef.value)
}
</script>

一旦组件被挂载，cihldRef.value 将指向对应的组件实例对象。通过这个实例对象，可以调用组件的方法、访问组件的属性等。

打印cihldRef.value ，控制台输出结果如下：

子组件Child.vue没有暴露任何属性、方法给父组件。

defineExpose

当一个组件使用组合式 API 编写时，默认情况下，父组件无法直接访问 子组件内部定义的响应式变量和方法。

通过使用defineExpose，可以有选择地将子组件内部的一些属性和方法暴露给父组件。

这是上面例子中的Child.vue:

javascript 复制代码

<template>
  <div>
    <div>count: {{ count }}</div>
    <button @click="addCount">点击 count+1</button>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

let count = ref(0);

const addCount = () => {
  count.value++;
};

// 把属性count、方法addCount暴露给父组件
defineExpose({
  count,
  addCount
});
</script>

在父组件Parent.vue中执行console.log(cihldRef.value)，控制台输出结果：

可以看到，子组件Child.vue把属性count、方法addCount暴露给父组件Parent.vue。

在父组件Parent.vue中，调用子组件的addCount：

javascript 复制代码

const showChildRef = () => {
  console.log(cihldRef.value)
  cihldRef.value.addCount()
}

`ref` 可以接收一个函数值，用于对存储引用位置的完全控制

在模板中，当使用 ref 并传入一个函数时，这个函数会在组件挂载后被调用，并且接收被引用的组件实例或 DOM 元素作为参数。

示例：

html 复制代码

<template>
  <ChildComponent :ref="(el) => child = el" />
</template>

在这个例子中，当 <ChildComponent> 组件挂载后，传入的函数 (el) => child = el 会被调用，参数 el 代表 <ChildComponent> 组件的实例。这个函数将组件实例赋值给了外部定义的变量 child，从而可以在其他地方通过 child 来访问 <ChildComponent> 组件的实例。

vue3 内置的特殊属性ref