VUE3获取子组件的方法，变量

魑魅魍魉魈

于 2021-04-25 09:37:05 发布

阅读量8.2k

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript typescript es6 vue.js node.js

本文链接：https://blog.youkuaiyun.com/chen_daimaxz/article/details/116116779

本文介绍如何在Vue3中通过expose函数实现父组件获取子组件内的方法和变量。展示了具体的代码示例，包括如何定义子组件的方法并暴露给父组件调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

VUE3获取子组件内方法和变量

1，ref获取

父组件

<child ref="child" />
----------------------
//省略代码
const child=ref(null)
console.log(child.value)  //{}

很明显，vue3现在不能使用以前的ref来或者子组件实例了,但是vue3现在提供了一个expose函数

expose

child.vue
----------------------
//js部分
<script lang="ts" setup>
  import { useContext } from 'vue';
  const { expose } =useContext()
  const fn=()=>{'这是子组件的方法'}
  expose({
    fn
  })
</script>

parent.vue
-----------------------
<child ref="child" />
----------------------
//省略代码
const child=ref(null)
console.log(child.value)  //{fn} 这样就拿到子组件传过来的函数