• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

一、vue2语法

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

一个设置ref值的组件:

<base-input ref="usernameInput"></base-input>


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

this.$refs.usernameInput


可以调用里面的方法:

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


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

二、vue3使用

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

1. 组件设置ref值

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

<ChildVue ref="childRef" />

2. 组件实例获取

设置完成后,vue3可以通过ref方法获取。

const childRef = ref();


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

undefined

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

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


3. 子组件内设置对外公开的变量

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

// 子组件代码
const foo = () => {
  console.log("foo");
}
defineExpose({
  foo
});


父组件内调用:

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


这样就可以调用到子组件的方法了。

查看childRef.value,也可以看到其中公开的foo方法:

vue3父组件调用子组件方法

完整参考代码:

父组件:

<template>
    <ChildVue ref="childRef" />
</template>
 
<script setup lang="ts">
import { ref } from '@vue/reactivity';
import { onMounted } from '@vue/runtime-core';
import ChildVue from './Child.vue';
 
const childRef = ref();
console.log(childRef.value); // undefined
 
onMounted(() => {
    console.log(childRef.value); // Proxy {…}
    // 调用子组件方法
    childRef.value.foo(); // foo
});
</script>
 
<style>
</style>


子组件:

<template>child demo</template>
 
<script setup lang="ts">
const foo = () => {
  console.log("foo");
}
defineExpose({
  foo
});
</script>
 
<style>
</style>

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
vue3时间戳转换(不使用过滤器)发布时间:2022-02-05
下一篇:
利用vue3+threejs仿iView官网大波浪特效实例发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap