vue3中的组件ref怎么使用

在Vue 3中，可以使用ref函数来创建一个响应式的引用。ref函数接受一个参数作为初始值，并返回一个包含value属性的响应式对象。可以通过操作value属性来读取或修改引用的值。

下面是一个使用ref的示例：

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0); // 创建一个引用，初始值为0
    
    function increment() {
      count.value++; // 修改引用的值
    }
    
    return {
      count,
      increment
    };
  }
}

在上面的示例中，count是一个引用对象，使用count.value来访问或修改引用的值。increment是一个方法，每次调用会将count的值增加1。

在模板中可以通过count和increment来使用ref创建的引用：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

这样就可以在模板中实时显示和修改引用的值了