setup语法糖中父组件调用子组件的属性或方法

最新推荐文章于 2023-07-02 23:06:38 发布

辰辰北

最新推荐文章于 2023-07-02 23:06:38 发布

阅读量219

点赞数

文章标签： vue3 setup 语法糖

本文链接：https://blog.csdn.net/weixin_42943920/article/details/131027275

版权

setup语法糖中父组件调用子组件的属性或方法。
父组件：

<template>
  <div class="app">
    <p>App</p>
    <about ref="aboutRef"></about>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
// 获取about组件实例
const aboutRef = ref()
onMounted(() => { // 假设在onMounted中调用子组件方法
  aboutRef.value.foo()
})
</script>

子组件：

<template>
  <div>
    <p>About</p>
  </div>
</template>

<script setup>
function foo () {
  console.log("foo function");
}
defineExpose({ // 子组件中想要暴露出去的方法或数据来这儿集合
  foo
})
</script>