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

目录
  • 一、vue2语法
  • 二、vue3使用
    • 1. 组件设置ref值
    • 2. 组件实例获取
    • 3. 子组件内设置对外公开的变量

一、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中setup-script的应用实例

    目录 新特性的产生背景 内部变量 子父级传值 总结 新特性的产生背景 在了解它怎么用之前,可以先了解一下它被推出的一些背景,可以帮助你对比开发体验上的异同点,以及了解为什么会有这一章节里面的新东西. 在 Vue 3.0 的 .vue 组件里,遵循 SFC 规范要求(注:SFC,即 Single-File Component,.vue 单组件),标准的 setup 用法是,在 setup 里面定义的数据如果需要在 template 使用,都需要 return 出来. 如果你使用的是 TypeScr

  • Vue3+script setup+ts+Vite+Volar搭建项目

    Vue3+script setup+ts+Vite+Volar搭建项目

    目录 使用 Vite 创建 vue + ts 项目 Vue 3 的三种语法 Option API Composition API script setup(Composition API 的语法糖) 安装 Volar 结尾 好久没有写了,最近看到Vue3.2 发布了,害,又要开始卷了么. 其实我自己本身还没有使用过Vue3 做过实际的项目开发,然鹅又出新东西了--, 新时代农民工真的是左手工作,右手游戏,还要用jio去学习呢. 什么? 你说谈对象? xswl,我特么一个农民工也配谈对象? 不卷不

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

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

    目录 一.vue2语法 二.vue3使用 1. 组件设置ref值 2. 组件实例获取 3. 子组件内设置对外公开的变量 一.vue2语法 vue2语法在组件上设置ref属性后,在代码里可以通过 this.$refs.ref值 访问到对应的子组件. 一个设置ref值的组件: <base-input ref="usernameInput"></base-input> 在js代码中可以通过如下代码访问到这个组件: this.$refs.usernameInput 可以

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

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

    目录 一.vue2语法 二.vue3使用 1. 组件设置ref值 2. 组件实例获取 3. 子组件内设置对外公开的变量 一.vue2语法 vue2语法在组件上设置ref属性后,在代码里可以通过 this.$refs.ref值 访问到对应的子组件. 一个设置ref值的组件: <base-input ref="usernameInput"></base-input> 在js代码中可以通过如下代码访问到这个组件: this.$refs.usernameInput 可以

  • Vue3 ＜script setup lang=“ts“＞ 的基本使用

    目录 1.<script setup> 是什么? 1.1. 发展历程 1.2. 优势 2. 使用要点 2.1. 工具 2.2. 基本用法 2.3. 编译器宏 2.4. 辅助函数 2.5. 使用组件 2.6. 组件name 2.7. inheritAttrs 2.8. 顶层await支持 2.9. 命名空间组件 2.10. 状态驱动的动态 CSS 2.11. 指令 2.12. Composition Api类型约束 本文主要是讲解 <script setup> 与 TypeScrip

  • 详解Vue3 父组件调用子组件方法($refs 在setup()、＜script setup＞ 中使用)

    在 vue2 中 ref 被用来获取对应的子元素,然后调用子元素内部的方法. <template> <!-- 子组件 --> <TestComponent ref="TestComponent"></TestComponent> </template> <script> // 导入子组件 import TestComponent from './TestComponent' export default { com

  • vue3中单文件组件<script setup>实例详解

    目录 一.相比普通script语法的优势 二.基本语法 三.响应式 四.使用组件 五.使用自定义指令 六.defineProps 和 defineEmits 七.defineExpose 八.useSlots 和 useAttrs 九.顶层 await 附:<script setup>和 <script>之间的主要区别 总结 一.相比普通script语法的优势 <script setup>是在单文件组件 (SFC) 中使用组合式 API的编译时语法糖.相比于普通的 &l

  • vue3.0中setup使用(两种用法)

    一.setup函数的特性以及作用 可以确定的是 Vue3.0 是兼容 Vue2.x 版本的 也就是说我们再日常工作中 可以在 Vue3 中使用 Vue2.x 的相关语法 但是当你真正开始使用 Vue3 写项目时 你会发现他比 Vue2.x 方便的多 Vue3 的一大特性函数 ---- setup 1.setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的 2.

  • vue3更新的setup语法糖实例详解

    目录 前言 语法糖用法: 语法糖带来的体验 一.组件自动注册 二.属性及方法无需return 三.自动将文件名定义为组件的name属性 1.defineProps 2.defineEmits 3.defineExpose 总结 前言 vue3最近更新了一个setup语法糖,这两天才看到,使用起来雀食很甜,特发个帖子记录下 语法糖用法: // 将 `setup` attribute 添加到 `<script>` 代码块上 // 里面的代码会被编译成组件 `setup()` 函数的内容 // 就是

  • 一文搞懂Vue3.2中setup语法糖使用

    目录 前言 一.如何使用setup语法糖 二.data数据的使用 三.method方法的使用 四.watchEffect的使用 五.watch的使用 六.computed计算属性的使用 七.props父子传值的使用 八.emit子父传值的使用 九.获取子组件ref变量和defineExpose暴露 十.路由useRoute和useRouter的使用 十一.store仓库的使用 十二.await 的支持 十三.provide 和 inject 祖孙传值 前言 提示:Vue3.2 版本开始才能使用语

  • Vue3中使用setup通过ref获取子组件的属性

    Vue3中使用setup通过ref获取子组件的属性

    目录 setup通过ref获取子组件的属性 调用子组件的属性和方法 setup通过ref获取子组件的属性 主要依赖defineExpose 子组件通过 defineExpose将数据抛出 <template>   <div class="test-com">testCom</div> </template> <script setup lang="ts"> import { ref } from 'vue'

随机推荐