vue3中标签的ref属性

在Vue 3中，ref属性是用于响应式地声明一个对象的属性，该属性可以是响应式的数据源，可以是响应式的DOM元素，或者组件实例。

以下是一些使用ref属性的示例：

1. 响应式DOM元素：

<template>
  <input ref="inputRef" type="text">
  <button @click="focusInput">Focus Input</button>
</template>
 
<script>
import { ref, onMounted } from 'vue';
 
export default {
  setup() {
    const inputRef = ref(null);
    
    const focusInput = () => {
      if (inputRef.value) {
        inputRef.value.focus();
      }
    };
 
    onMounted(() => {
      if (inputRef.value) {
        inputRef.value.focus(); // 在组件挂载后自动聚焦输入框
      }
    });
 
    return {
      inputRef,
      focusInput
    };
  }
};
</script>

2. 响应式组件实例：

<template>
  <MyComponent ref="myComponentRef" />
  <button @click="sayHello">Say Hello</button>
</template>
 
<script>
import { ref } from 'vue';
import MyComponent from './MyComponent.vue';
 
export default {
  components: {
    MyComponent
  },
  setup() {
    const myComponentRef = ref(null);
    
    const sayHello = () => {
      if (myComponentRef.value) {
        myComponentRef.value.sayHello();
      }
    };
 
    return {
      myComponentRef,
      sayHello
    };
  }
};
</script>

在这个例子中，MyComponent是一个子组件，它有一个方法sayHello。我们通过ref属性将其引用为myComponentRef，然后可以通过myComponentRef.value访问到这个组件的实例，并调用其方法。