Vue3实战笔记（44）—vue3组件的ref属性

---

前言

之前学习过ref声明响应式对象，前几天读代码遇到了发懵的地方，详细学习了一下才发现，用法还有很多，遂总结一下ref的用法备忘。

---

一、组件的ref用法总结

Vue3 中的 ref 是一种创建响应式引用的方式，它在Vue生态系统中扮演着重要角色。以下是Vue3中ref属性及其相关API的几个关键点：

创建响应式变量：使用 ref 函数可以创建一个响应式的数据引用，返回的对象包含 .value 属性，该属性既可以读取也可以写入，并且是响应式的。例如：

Javascript
1import { ref } from 'vue';
2
3const count = ref(0); // 创建一个响应式引用，初始值为0
4console.log(count.value); // 输出0
5count.value++; // 改变值，这将触发视图更新

在模板中使用 ref：在模板中，可以使用 v-ref 或简写 ref 来给 DOM 元素或组件添加引用标识符。对于DOM元素：

<div ref="myDiv">Hello World</div>

然后在组件的 setup 函数内或者生命周期钩子如 onMounted 中通过 ref 访问到该元素：

onMounted(() => {
 console.log(myDiv.value); // 这将输出对应的DOM元素
});

// 注意，在setup函数中使用需要解构
setup() {
  const myDiv = ref<HTMLElement | null>(null);
  // ...

对于子组件，ref 则指向子组件的实例：

<MyChildComponent ref="childRef" />

动态 refs：在动态渲染的组件或循环列表中，可以使用动态 ref 名称：

1<component v-for="(item, index) in items" :is="item.component" :key="index" :ref="`child${index}`" />
然后通过 getCurrentInstance() 获取这些动态 ref：

Javascript
1setup() {
2  const instance = getCurrentInstance();
3  const childrenRefs = computed(() => {
4    return instance.refs;
5  });
6  // ...
7}

组件间通信：通过 ref 可以方便地在组件之间传递并操作状态，尤其适用于父子组件之间的通信。
(1)创建一个子组件 ChildComponent.vue：

<template>
  <div>
    <h2>{{ childMessage }}</h2>
    <button @click="handleClick">点击我</button>
  </div>
</template>

<script>
import { ref, defineComponent } from 'vue';

export default defineComponent({
  setup(props, { emit }) {
    const childMessage = ref('Hello from Child');
    const handleClick = () => {
      emit('child-clicked', 'Child component clicked!');
    };

    return {
      childMessage,
      handleClick,
    };
  },
});
</script>

(2)创建一个父组件 ParentComponent.vue，并使用 ref 属性访问子组件实例：

<!-- ParentComponent.vue --><template>
  <div>
    <h1>Parent Component</h1>
   <ChildComponent ref="childRef" />
   <button @click="callChildMethod">Call Child Method</button>
  </div>
</template><script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  setup() {
    const childRef = ref(null);

    function callChildMethod() {
      childRef.value.showMessage();
    }

    return {
      childRef,
      callChildMethod,
    };
  },
};
</script>

在这个示例中，我们在父组件的模板中使用了 ref 属性，并将其值设置为 “childRef”。然后，在组合式 API 的 setup 函数中，我们创建了一个名为 childRef 的响应式引用，并将其初始值设置为 null。接着，我们定义了一个名为 callChildMethod 的方法，用于调用子组件的 showMessage 方法。当用户点击按钮时，callChildMethod 方法会被调用，从而触发子组件的 showMessage 方法并在控制台输出一条消息。

import { reactive, toRef } from 'vue';
2
3const state = reactive({ count: 0 });
4const countRef = toRef(state, 'count'); // 提取出count属性的响应式引用

---

总结

总之，Vue3 的 ref 功能增强了Vue的响应式系统，使得开发者能够更灵活地处理组件的状态及组件间交互，同时提供了对DOM元素的直接访问能力。

人总是在接近幸福时倍感幸福，在幸福进行时却患得患失。