Vue3+Ts 组合API调用子组件方法

bianmaren 发布于 2022-04-15 09:54:00    访问

标签 : Vue3 TS

830fd44e0c05422e2a5d18691e1b07de.jpeg

1、子组建定义方法,并对外暴露

<script setup lang="ts">

import {computed, reactive, ref,defineExpose} from "vue";

/**
 * 定义方法
 */
const initData = () => {
  console.info("initData")
}


/**
 * 对外暴露子组建方法
 */
defineExpose({
  initData
})

</script>


2、父页面导入组建

import type docSharePublish from "@/components/doc-share-publish/index.vue";

3、父亲页面定义组建

const docSharePublishRef = ref<InstanceType<typeof docSharePublish>>()

4、父亲页面调用子组建方法

docSharePublishRef.value.initData();