vue3父组件调用子组件里面的方法

与vue2一样定义ref

<template>
  <!-- 子组件 -->
  <User name="zs" :age="age" ref="user"></User>
</template>

js中定义ref的变量并且返回

import {ref,onMounted} from 'vue'
export default {
  setup(props,content) {
    const age = ref(0)
   // const user = ref<null | HTMLElement>(null); // ts用法
    const user = ref(null) // js用法
    onMounted(() => {
      user.value.open('lisi') // 调用子组件中的open方法
    })
    return {
      age,user
    }
  }
}

在setup语法糖中使用

子组件

<script setup>
// setup 语法糖模式给父组件传递方法
// 第一步:定义子组件里面的方法
 const getLineEcharts = (config) => {
// }
// 第二步:暴露方法
 defineExpose({ getLineEcharts })
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容