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

vue3 父组件调用子组件方法

1、使用ref属性(推荐方式)

在子组件上添加ref属性

<template>
  <div>
    <Child ref="childRef"></Child>
    <button @click="isgetlist">调用子组件方法</button>
  </div>
</template>
<script setup>
    import { ref } from 'vue';
    import Child from './Child.vue';
    const childRef= ref(null);
    const isgetlist= () => {
      if (childRef.value) {
        // 假设子组件有一个名为childMethod的方法
        childComponentRef.value.getlist();
      }
    };
</script>

子组件暴露想要父组件调用的事件 

<template>
  <div>
    <h2>子组件</h2>
  </div>
</template>
<script setup>
    const getlist= () => {
      console.log('子组件的方法被调用了');
    };
    // 将方法暴露给父组件
    defineExpose({
      getlist
    });
</script>


http://www.kler.cn/a/505194.html

相关文章:

  • 为深度学习创建PyTorch张量 - 最佳选项
  • 论文阅读:Searching for Fast Demosaicking Algorithms
  • Chatper 4: Implementing a GPT model from Scratch To Generate Text
  • C++复习
  • Elasticsearch技术标准解析与实践案例
  • hive迁移后修复分区慢,怎么办?
  • 在 WSL Ubuntu 上安装 ProxySQL 并配置 主从同步,读写分离,延迟检测
  • C++并发编程之掩藏任务延迟与提高响应性的应用说明
  • Windows MFC 管理员权限DragAcceptFiles无效 处理方法
  • JavaSwing游戏开发之Camera原理
  • Java 输入输出流(上)
  • Gitlab流水线配置
  • Java 后端整合 Swagger + Knife4j 接口文档
  • 学员答疑:安卓分屏窗口的TouchableRegion设置流程追踪
  • 【STM32】存储分析深入——堆栈与map文件
  • C++进阶(四)--set和map的介绍与使用
  • 【落羽的落羽 C语言篇】文件操作
  • stack_queue的底层,模拟实现,deque和priority_queue详解
  • 深入探讨DICOM医学影像中的MPPS服务及其具体实现
  • 【原创】大数据治理入门(4)《保护数据隐私:大数据治理的最佳实践》入门必看 高赞实用
  • 战场物联网:通信挑战与最新解决方案综述
  • BUUCTF[ACTF新生赛2020]easyre
  • ubuntu22.04:解决google chrome 访问百度页面加载慢的问题
  • C++ 并发编程之std::find的并发版本
  • centos使用dpdk库
  • 【AI学习】地平线首席架构师苏箐关于自动驾驶的演讲