1.当refs是一个字符串时,在渲染时会将其关联到相应的元素或组件上,然后可以使用.value来访问它们:
<div>
<input ref="inputRef" />
<button @click="handleClick">Click me</button>
</div>
</template>
<script>
import { ref } from'vue';
export default {
setup() {
const inputRef = ref(null);
const handleClick = () => {
inputRef.value.focus();
};
return {
inputRef,
handleClick,
};
},
};
</script>
当refs是一个函数时,在渲染时会将其传递给组件的setup()函数,并且每当组件重新渲染时都会调用该函数。这使得我们可以动态地创建和更新引用
<div>
<MyComponent :ref="refHandler" />
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
import MyComponent from './MyComponent.vue';
export default {
components: {
MyComponent,
},
setup() {
const refHandler = (el) => {
console.log(el); // 打印组件实例或DOM元素
};
onMounted(() => {
console.log(refHandler.value);
});
return {
refHandler,
};
},
};
</script>