耀极客论坛

 找回密码
 立即注册
查看: 579|回复: 0

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

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-9 00:28:42 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了vue3基于script setup语法$refs的使用,‹BR> 在用vue3开发项目的时候,需要调用子组件的方法,于是想着用$refs来实现,但是我是使用script setup语法糖,原先vue2的语法已经不适用了。下面我们一起进入文章看详细内容吧‹/P>‹P>

一、vue2语法
  vue2语法在组件上设置ref属性后,在代码里可以通过 this.$refs.ref值 访问到对应的子组件。
  一个设置ref值的组件:
  1. ‹base-input ref="usernameInput">‹/base-input>
复制代码
  在js代码中可以通过如下代码访问到这个组件:
  1. this.$refs.usernameInput
复制代码
  可以调用里面的方法:
  1. // 假设 base-input 组件内有方法foo
  2. this.$refs.usernameInput.foo();
复制代码
  详细使用可以参考底部列出的参考文章。

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

1. 组件设置ref值
  这个和vue2的类似,父组件调用子组件的时候设置ref值。
  1. ‹ChildVue ref="childRef" />
复制代码
2. 组件实例获取
  设置完成后,vue3可以通过ref方法获取。
  1. const childRef = ref();
复制代码
  这边变量的名字需要和上面ref的一致。如何直接打印childRef,这个时候会是:
  1. undefined
复制代码
  因为页面组件还没有挂载完成,所以需要在挂载完成之后才能正常使用。
  1. onMounted(() => {
  2.     console.log(childRef.value); // Proxy {…}
  3. });
复制代码
3. 子组件内设置对外公开的变量
  上面第2步获取到子组件实例后,无法使用子组件内的方法,因为使用 script setup 的组件默认是关闭的,如果需要公开,需要使用 defineExpose 编译器宏。
  1. // 子组件代码
  2. const foo = () => {
  3.   console.log("foo");
  4. }
  5. defineExpose({
  6.   foo
  7. });
复制代码
  父组件内调用:
  1. // 调用子组件方法
  2. childRef.value.foo(); // foo
复制代码
  这样就可以调用到子组件的方法了。
  查看childRef.value,也可以看到其中公开的foo方法:
  vue3父组件调用子组件方法

  完整参考代码:
  父组件:
  1. ‹template>
  2.     ‹ChildVue ref="childRef" />
  3. ‹/template>
  4. ‹script setup lang="ts">
  5. import { ref } from '@vue/reactivity';
  6. import { onMounted } from '@vue/runtime-core';
  7. import ChildVue from './Child.vue';
  8. const childRef = ref();
  9. console.log(childRef.value); // undefined
  10. onMounted(() => {
  11.     console.log(childRef.value); // Proxy {…}
  12.     // 调用子组件方法
  13.     childRef.value.foo(); // foo
  14. });
  15. ‹/script>
  16. ‹style>
  17. ‹/style>
复制代码
  子组件:
  1. ‹template>child demo‹/template>
  2. ‹script setup lang="ts">
  3. const foo = () => {
  4.   console.log("foo");
  5. }
  6. defineExpose({
  7.   foo
  8. });
  9. ‹/script>
  10. ‹style>
  11. ‹/style>
复制代码
  到此这篇关于vue3基于script setup语法$refs的使用的文章就介绍到这了,更多相关vue3  $refs的使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-11-28 19:48 , Processed in 0.073032 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表