组合式api中ref的作用
时间: 2024-06-10 14:10:04 浏览: 0
在组合式 API 中,ref 的作用是用来获取组件实例或者 DOM 元素的引用。通过 ref,我们可以在组件渲染完成后,访问到组件实例或者 DOM 元素,从而实现一些操作,例如:修改组件的数据、调用组件的方法、操作 DOM 元素等。
在组合式 API 中,我们可以通过两种方式来使用 ref:
1. 使用函数式的 ref
```js
const myComponent = {
setup() {
// 声明 ref
const myRef = ref(null);
// 在组件渲染完成后,将组件实例或者 DOM 元素赋值给 ref
onMounted(() => {
myRef.value = this.$refs.myRef;
});
return {
myRef,
};
},
template: `
<div ref="myRef"></div>
`,
};
```
2. 使用对象式的 ref
```js
const myComponent = {
setup() {
// 声明 ref
const myRef = ref(null);
// 在组件渲染完成后,将组件实例或者 DOM 元素赋值给 ref
onMounted(() => {
myRef.value = this.$refs.myRef;
});
return {
myRef,
};
},
template: `
<div v-bind:ref="myRef"></div>
`,
};
```
无论是函数式的 ref 还是对象式的 ref,都可以通过 ref.value 来访问到组件实例或者 DOM 元素。例如:
```js
const myComponent = {
setup() {
// 声明 ref
const myRef = ref(null);
// 在组件渲染完成后,将组件实例或者 DOM 元素赋值给 ref
onMounted(() => {
myRef.value = this.$refs.myRef;
console.log(myRef.value); // 输出组件实例或者 DOM 元素
});
return {
myRef,
};
},
template: `
<div ref="myRef"></div>
`,
};
```