vue3基于script setup语法$refs的使用
更新时间：2022年01月25日 09:13:40 作者：快乐编程
这篇文章主要介绍了vue3基于script setup语法$refs的使用，<BR> 在用vue3开发项目的时候，需要调用子组件的方法，于是想着用$refs来实现，但是我是使用script setup语法糖，原先vue2的语法已经不适用了。下面我们一起进入文章看详细内容吧</P><P>
一、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的使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了详解vuex commit保存数据技巧，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
下面小编就为大家分享一篇vue2.0 axios跨域并渲染的问题解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了使用vue-cli3打包dist路径问题修改打包配置，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了mpvue小程序开发之 实现一个弹幕评论功能，本文通过实例讲解的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-11-11
vue中如何使用echarts和echarts-gl实现3D饼图环形饼图
现在vue是很多公司前端的主流框架,我目前所在公司接触的项目也都是使用vue来实现的,很少有完全使用原生的JavaScript来写项目的了,下面这篇文章主要给大家介绍了关于vue中如何使用echarts和echarts-gl实现3D饼图环形饼图的相关资料,需要的朋友可以参考下2023-03-03
vue使用百度地图报错BMap is not defined问题及解决
这篇文章主要介绍了vue使用百度地图报错BMap is not defined问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。下面这篇文章主要给大家总结了Vue在开发过程中遇到的疑惑知识点,有需要的朋友可以参考借鉴，下面来一起看看吧。2017-01-01
本篇文章主要介绍了用vuex写了一个购物车H5页面的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
浅谈vue实现数据监听的函数 Object.defineProperty
本篇文章主要介绍了浅谈vue实现数据监听的函数 Object.defineProperty，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
vue-router 按需加载 component: () => import() 报错的解决
这篇文章主要介绍了vue-router 按需加载 component: () => import() 报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
最新评论