Vue - 标签中 ref 属性的使用

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

基本语法：

详细说明:

• ref 属性：在模板中，使用 ref 属性为元素或组件指定一个引用名称。这个名称可以是任何有效的 JavaScript 标识符。
• ref 函数：在 

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

  注意事项

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

  与defineExpose 的结合：

  defineExpose 是 Vue 3 中在 

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

  2. 使用子组件

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

  总结

  • ref 属性用于在 Vue 3 中引用 DOM 元素或组件实例。
  • 通过 ref 函数创建响应式引用，并在组件的生命周期钩子中访问它们。
  • 可以用于直接操作 DOM 或调用子组件的方法。
  • defineExpose: 允许在子组件中定义要暴露的属性和方法，使得父组件可以访问这些内在状态。
  • 组合使用: 通过结合使用 ref 和 defineExpose，可以在一个组件中定义内部逻辑，并在父组件中进行灵活操作。