vue3基于script setup语法$refs的使用

极客

　　这篇文章主要介绍了vue3基于script setup语法$refs的使用，‹BR> 在用vue3开发项目的时候，需要调用子组件的方法，于是想着用$refs来实现，但是我是使用script setup语法糖，原先vue2的语法已经不适用了。下面我们一起进入文章看详细内容吧‹/P>‹P>

一、vue2语法
　　vue2语法在组件上设置ref属性后，在代码里可以通过 this.$refs.ref值 访问到对应的子组件。
　　一个设置ref值的组件：

2. ‹base-input ref="usernameInput">‹/base-input>

复制代码

　　在js代码中可以通过如下代码访问到这个组件：

2. this.$refs.usernameInput

复制代码

　　可以调用里面的方法：

2. // 假设 base-input 组件内有方法foo
4. this.$refs.usernameInput.foo();

复制代码

　　详细使用可以参考底部列出的参考文章。

二、vue3使用
　　网上找了一些文章比较零散，而且试了下都不能用，但是通过这些文章了解到了一些关键信息，最后整理出如下几步：

1. 组件设置ref值
　　这个和vue2的类似，父组件调用子组件的时候设置ref值。

2. ‹ChildVue ref="childRef" />

复制代码

2. 组件实例获取
　　设置完成后，vue3可以通过ref方法获取。

2. const childRef = ref();

复制代码

　　这边变量的名字需要和上面ref的一致。如何直接打印childRef，这个时候会是：

2. undefined

复制代码

　　因为页面组件还没有挂载完成，所以需要在挂载完成之后才能正常使用。

2. onMounted(() => {
3.     console.log(childRef.value); // Proxy {…}
4. });

复制代码

3. 子组件内设置对外公开的变量
　　上面第2步获取到子组件实例后，无法使用子组件内的方法，因为使用 script setup 的组件默认是关闭的，如果需要公开，需要使用 defineExpose 编译器宏。

2. // 子组件代码
3. const foo = () => {
4.   console.log("foo");
5. }
6. defineExpose({
7.   foo
8. });

复制代码

　　父组件内调用：

2. // 调用子组件方法
3. childRef.value.foo(); // foo

复制代码

　　这样就可以调用到子组件的方法了。
　　查看childRef.value，也可以看到其中公开的foo方法：
　　vue3父组件调用子组件方法

　　完整参考代码：
　　父组件：

2. ‹template>
3.     ‹ChildVue ref="childRef" />
4. ‹/template>
6. ‹script setup lang="ts">
7. import { ref } from '@vue/reactivity';
8. import { onMounted } from '@vue/runtime-core';
9. import ChildVue from './Child.vue';
11. const childRef = ref();
12. console.log(childRef.value); // undefined
14. onMounted(() => {
15.     console.log(childRef.value); // Proxy {…}
16.     // 调用子组件方法
17.     childRef.value.foo(); // foo
18. });
19. ‹/script>
21. ‹style>
22. ‹/style>

复制代码

　　子组件：

2. ‹template>child demo‹/template>
4. ‹script setup lang="ts">
5. const foo = () => {
6.   console.log("foo");
7. }
8. defineExpose({
9.   foo
10. });
11. ‹/script>
13. ‹style>
14. ‹/style>

复制代码

　　到此这篇关于vue3基于script setup语法$refs的使用的文章就介绍到这了,更多相关vue3  $refs的使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

---