vue3父组件通过ref调用子组件的方法

Index.vue

javascript 复制代码
<script setup>
import { ref, onMounted } from 'vue'
import Child from './Child.vue'
import './index.css'

const child = ref(null)

onMounted(() => {
  child.value.handleGetValue()
})
</script>

<template>
  <div class="m-home-wrap">
    <Child ref="child"></Child>
    <div class="m-home-demo"></div>
  </div>
</template>

<style></style>

Child.vue:

javascript 复制代码
<template>
  <div>child</div>
</template>

<script>
export default {
  methods: {
    handleGetValue() {
      console.log('子组件的方法')
    }
  }
}
</script>

<style>

</style>

人工智能学习网站

https://chat.xutongbao.top

相关推荐
小羊Yveesss15 分钟前
2026年前端开发新趋势:智能协同、工具革新与场景深耕
前端·ai
Dxy123931021624 分钟前
HTML中的Canvas可以干哪些事情
前端·html
悟乙己27 分钟前
解析 Agent 时代的 HTML PPT SKILLS: html-ppt-skill
前端·html·powerpoint
ZC跨境爬虫29 分钟前
跟着 MDN 学 HTML day_2:(表单分组与高级输入控件实战)
前端·javascript·css·ui·html
吴声子夜歌1 小时前
Vue3——UI组件库Element Plus(一)
vue.js·ui·elementplus
ppandss11 小时前
JavaWeb从0到1-DAY4-AJAX
前端·ajax·okhttp
千寻girling1 小时前
滑动窗口刷了快一个月(26天)了 , 还没有刷完. | 含(操作系统学什么的Java 后端)
java·开发语言·javascript·c++·人工智能·后端·python
一袋米扛几楼981 小时前
【报错问题】彻底解决 TypeScript 报错 TS2769: No overload matches this call (JWT 篇)
linux·javascript·typescript
涵涵(互关)1 小时前
语法大全-only-writer-two
前端·vue.js·typescript
huangql5201 小时前
浏览器 Location API、History API、路由记录与支付跳转完全指南
前端