[JavaScript知识库]vue3 composition api父组件调用子组件的方法

示例

子组件

通过defineExpose暴露给父组件调用的方法

const resize = () => {
    ehcart.resize()
}
defineExpose({
  resize
})

父组件

通过ref获取子组件实例,调用defineExpose暴露的方法，记得不要忘了加上value

template

  <myEchart ref="getChart" />

script

const getChart = ref(null)
window.onresize = () => {
    getChart.value.resize()
  }

什么是defineExpose

以下内容来自vue3官方文档

使用 <script setup> 的组件是默认关闭的，也即通过模板 ref 或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。

为了在 <script setup> 组件中明确要暴露出去的属性，使用 defineExpose 编译器宏：

<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>

当父组件通过模板 ref 的方式获取到当前组件的实例，获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖