当前位置: 首页 > news >正文

vue3父组件获取子组件的实例对象

一,ref

在父组件的模板里,对子组件的标签定义ref属性,并且设置属性值,在方法里获取ref()获取实例对象。

父组件:

<template><div ><div>我是父组件</div><<SonCom ref="sonComRef"></SonCom> </div>
</template>
<script setup lang='ts'>import SonCom from '@/components/SonCom.vue';  // 引入子组件import { ref } from 'vue';// 获取子组件实例let sonComRef = ref()  // 这里变量必须跟ref属性定义的值一致// 必须加载完成组件后,再去获取实例onMounted(() =>{console.log(sonComRef.value.msg)    // 我是暴露出去的子组件数据sonComRef.value.fun()  // 我是暴露出去的子组件方法})
</script>

二,defineExpose

子组件引入defineExpose,在通过defineExpose暴露出去数据和方法

子组件:

<template><div ><div>我是子组件</div></div>
</template>
<script setup lang='ts'>import { ref, defineExpose } from 'vue';let msg = ref<string>('我是暴露出去的子组件数据')let fun = () => {console.log('我是暴露出去的子组件方法');}defineExpose({msg,fun}) 
</script>

http://www.lryc.cn/news/379522.html

相关文章:

  • 主流框架选择:React、Angular、Vue的详细比较
  • 交易者的意义是什么?
  • io_uring
  • 构建高并发Web应用:基于Gunicorn、Flask和Docker的部署指南
  • 【Ruby简单脚本02】双色球系统
  • Netty ByteBuf 使用详解
  • 怎样去掉卷子上的答案并打印
  • 海思SS928/SD3403开发笔记1——使用串口调试开发板
  • JSON数据操作艺术
  • 如何验证Rust中的字符串变量在超出作用域时自动释放内存?
  • 55.Python pip install 安装失败的一个情况Requirement already satisfied
  • Axios进阶
  • C++ 丑数
  • 小山菌_代码随想录算法训练营第三十天|122.买卖股票的最佳时机II、55. 跳跃游戏 、45.跳跃游戏II、1005.K次取反后最大化的数组和
  • SpringMVC系列七: 手动实现SpringMVC底层机制-上
  • 嵌入式web 服务器boa的编译和移植
  • 什么是js?特点是什么?组成部分?
  • Java 面试题:如何保证集合是线程安全的? ConcurrentHashMap 如何实现高效地线程安全?
  • 打工人的PPT救星来了!用这款AI工具,10秒生成您的专属PPT
  • GIT 合拼
  • 利用 Python 和 AI 技术制作智能问答机器人
  • electron系列(一)调用dll
  • VUE3实现个人网站模板源码
  • C语言 | Leetcode C语言题解之第162题寻找峰值
  • 利用pickle保存和加载对象
  • 定制汽车霍尔传感器
  • 【2024最新华为OD-C/D卷试题汇总】[支持在线评测] LYA的巡演(100分) - 三语言AC题解(Python/Java/Cpp)
  • ChatGPT 简介
  • 大数据实训室建设可行性报告
  • 学懂C#编程:让函数返回 多个返回值 的几种常用技术