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

晴空闲云
• 阅读 2422

在用vue3开发项目的时候,需要调用子组件的方法,于是想着用$refs来实现,但是我是使用script setup语法糖,原先vue2的语法已经不适用了。

于是一番折腾和查阅资料,终于搞定。

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中基于script setup语法糖的$refs使用

如果有帮助你解决问题,请帮忙点个赞,谢谢。

完整参考代码:

父组件:

<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>

参考文档

vue2访问子组件实例或子元素:https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E8%AE%BF%E9%97%AE%E5%AD%90%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B%E6%88%96%E5%AD%90%E5%85%83%E7%B4%A0

vue3 expose:https://v3.cn.vuejs.org/api/options-data.html#expose

vue3 defineexpose:https://v3.cn.vuejs.org/api/sfc-script-setup.html#defineexpose

点赞
收藏
评论区
推荐文章
Jacquelyn38 Jacquelyn38
1年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。 1、使用解构获取json数据let jsonData   id: 1, status: "OK", data: ['a', 'b'] ; let  id, status, data: number   jsonData; console.log(id, status, number )
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录 问题 用navicat导入数据时,报错: 原因这是因为当前的MySQL不支持datetime为0的情况。 解决修改sql\mode: sql\mode:SQL Mode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。 全局s
Stella981 Stella981
11个月前
Shodan的http.favicon.hash语法详解与使用技巧
  在Shodan搜索中有一个关于网站icon图标的搜索语法,**http.favicon.hash**,我们可以使用这个语法来搜索出使用了同一icon图标的网站,不知道怎么用的朋友请参考我[上一篇](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.cnblogs.com%2Fmia
Stella981 Stella981
11个月前
PhoneGap设置Icon
参考:http://cordova.apache.org/docs/en/latest/config\_ref/images.html 通过config.xml中的<icon>标签来设置Icon <icon src="res/ios/icon.png" platform="ios" width="57" height="57" densi
Wesley13 Wesley13
11个月前
Java爬虫之JSoup使用教程
title: Java爬虫之JSoup使用教程 date: 2018-12-24 8:00:00 +0800 update: 2018-12-24 8:00:00 +0800 author: me cover: [https://img-blog.csdnimg.cn/20181224144920712](https://www.oschin
Easter79 Easter79
11个月前
Twitter的分布式自增ID算法snowflake (Java版)
概述 == 分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。 有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。 而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Stella981 Stella981
11个月前
Django中Admin中的一些参数配置
### **设置在列表中显示的字段,id为django模型默认的主键** list_display = ('id', 'name', 'sex', 'profession', 'email', 'qq', 'phone', 'status', 'create_time') ### **设置在列表可编辑字段** list_editable
Stella981 Stella981
11个月前
Django 学习 之 模板(html)与配置静态文件
**一.模板(html)** --------------- **1.模板语法之变量****:****语法为 {{ }}** ------------------------------- 在 Django 模板中遍历复杂数据结构的关键是句点字符, 语法:{{ var\_name }} var\_name 是一个变量名称,需要和views文件retu
Wesley13 Wesley13
11个月前
SG :一个简单的PHP语法糖扩展
> **奇技指南** 语法糖往往给程序员提供了更实用的编码方式,可以使代码更简洁流畅,语义更自然。本文介绍笔者自己写的PHP语法糖扩展,扩展了一种全新的PHP超全局变量获取方式。 本文作者范家鹏,360技术委员会--WEB服务端分TC委员。 1、说说语法糖 ======= 首先说说“语法糖”这个词绝非贬义词,它可以给我们的开发工作带来便利,是一种轻量级便
Wesley13 Wesley13
11个月前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
#### 背景描述 # Time: 2019-01-24T00:08:14.705724+08:00 # User@Host: **[**] @ [**] Id: ** # Schema: sentrymeta Last_errno: 0 Killed: 0 # Query_time: 0.315758 Lock_
helloworld_34035044 helloworld_34035044
2个月前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。 uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid() 或 uuid(sep)参数说明:sep 布尔值,生成的uuid中是否包含分隔符'',缺省为
晴空闲云
晴空闲云
Lv1
教师
专注前端,把复杂的编程讲简单,又不失深度。@公众号:晴空闲云
26
文章
3
粉丝
2
获赞