Vue - 标签中 ref 属性的使用

在 Vue 3 中，ref 属性用于在模板中引用 DOM 元素或组件实例。通过 ref，可以直接访问这些元素或组件的实例，从而进行更复杂的操作，比如获取元素的尺寸、调用组件的方法等。

基本语法：

<template><div ref="myElement">Hello, Vue 3!</div>
</template><script setup>
import { ref, onMounted } from 'vue';const myElement = ref(null);onMounted(() => {// 访问 DOM 元素console.log(myElement.value); // 输出 DOM 元素
});
</script>

详细说明:

ref 属性：在模板中，使用 ref 属性为元素或组件指定一个引用名称。这个名称可以是任何有效的 JavaScript 标识符。
ref 函数：在 <script setup> 中，使用 ref 函数来创建一个响应式引用。初始值通常设置为 null，因为在组件挂载之前，引用的 DOM 元素尚不存在。
访问引用：在 onMounted 生命周期钩子中，可以通过 myElement.value 访问到 DOM 元素或组件实例。

访问组件实例：

ref 也可以用于访问子组件的实例。假设有一个子组件 ChildComponent，可以这样使用 ref：

<template><ChildComponent ref="child" /><button @click="callChildMethod">Call Child Method</button></template><script setup>import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';const child = ref(null);const callChildMethod = () => {// 调用子组件的方法if (child.value) {child.value.someMethod();}
};
</script>

在这个示例中，child 引用指向 ChildComponent 的实例，可以通过 child.value 访问并调用子组件的方法。

注意事项

响应式：ref 创建的引用是响应式的，但引用本身（如 myElement）并不是响应式的。需要通过 .value 来访问和修改引用的值。
生命周期：在组件的 mounted 钩子中，引用的 DOM 元素或组件实例才会被创建，因此在此之前访问它们会得到 null。
类型检查：在 TypeScript 中，使用 ref 时可以指定类型，以便获得更好的类型检查和自动补全。

与defineExpose 的结合：

defineExpose 是 Vue 3 中在 <script setup> 中使用的一个函数，用于定义要暴露给父组件的属性和方法。通过这个函数，可以让父组件访问子组件的内部状态和行为。

1. 创建子组件

<!-- 子组件：ChildComponent.vue -->
<template><div><h2>子组件</h2><p>Message: {{ message }}</p><button @click="increment ">我要被输出了</button></div>
</template><script setup>
import { ref, defineExpose } from 'vue';// 定义一个响应式变量
const message = ref('我是子组件!');// 定义一个方法
const increment = () => {message.value += '~';
};// 使用 defineExpose 暴露变量和方法
defineExpose({message,increment ,
});
</script><style scoped>
</style>

在上面的代码中，创建了一个子组件 ChildComponent，其中包含一个响应式变量 message 和一个 increment方法。通过 defineExpose，将这两个对象暴露给父组件。

2. 使用子组件

<!-- 父组件：ParentComponent.vue -->
<template><div><h1>父组件</h1><ChildComponent ref="child" /><button @click="showChildMessage">显示子组件信息</button><button @click="modifyChild">修改子组件信息</button></div>
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';const child = ref(null);// 获取子组件中的 message
const showChildMessage = () => {if (child.value) {alert(child.value.message); // 访问暴露的 message}
};// 调用子组件的 increment 方法
const modifyChild = () => {if (child.value) {child.value.increment (); // 调用暴露的 increment 方法}
};
</script><style scoped>
</style>

在父组件中，使用 ref 属性获取子组件的实例。当用户点击“显示子组件信息”按钮时，父组件会弹出子组件中的 message 值；而点击“修改子组件信息”时，父组件会调用子组件的 increment 方法，将 message 更新。