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

相关推荐
困惑阿三7 小时前
2025 前端技术全景图:从“夯”到“拉”排行榜
前端·javascript·程序人生·react.js·vue·学习方法
苏瞳儿7 小时前
vue2与vue3的区别
前端·javascript·vue.js
weibkreuz8 小时前
收集表单数据@10
开发语言·前端·javascript
hboot9 小时前
别再被 TS 类型冲突折磨了!一文搞懂类型合并规则
前端·typescript
在西安放羊的牛油果9 小时前
浅谈 import.meta.env 和 process.env 的区别
前端·vue.js·node.js
鹏北海9 小时前
从弹窗变胖到 npm 依赖管理:一次完整的问题排查记录
前端·npm·node.js
布列瑟农的星空9 小时前
js中的using声明
前端
薛定谔的猫29 小时前
Cursor 系列(2):使用心得
前端·ai编程·cursor
用户904706683579 小时前
后端问前端:我的接口请求花了多少秒?为啥那么慢,是你慢还是我慢?
前端
深念Y9 小时前
仿B站项目 前端 4 首页 顶层导航栏
前端·vue·ai编程·导航栏·bilibili·ai开发