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

相关推荐
大牧师29 分钟前
Nest.js 微服务入门教程
开发语言·javascript·后端·微服务·node.js·nest.js·nest
做萤石二次开发的哈哈33 分钟前
海康班班通交互一体机技能接入实战:ISAPI透传+OTAP双协议封装,Web/App/小程序教学管理应用一站生成
前端·物联网·小程序·交互·萤石开放平台·蓝海aiot一站式工作台·aiot开发
计算机魔术师36 分钟前
Anthropic一次性锁死十年算力,5170亿美元买什么
前端
IT_陈寒38 分钟前
Redis的订阅丢失消息?你可能忘了这个配置
前端·人工智能·后端
头茬韭菜44 分钟前
第 3 篇:「Pydantic 即 Schema」—— 工具生态三层解剖
前端·chrome·ai·openmanus
低代码布道师44 分钟前
外包项目管理平台全栈实战课02搭建数据底座:Next.js + PostgreSQL + Prisma 7
开发语言·javascript·postgresql·全栈开发
志尊宝1 小时前
Vue3 零基础每日笔记(004):模板语法初识——插值表达式、v-bind、v-on 一次学会
javascript·vue.js·笔记
恋猫de小郭1 小时前
Flutter 状态管理基准测评,一个很有趣的观点
android·前端·flutter
雪芽蓝域zzs1 小时前
前端编辑组件wangEditor
前端