Subscribe on changes!

defineExpose无法在createApp.mount实例中使用

avatar
Sep 23rd 2021

Version

3.2.6

Reproduction link

Steps to reproduce

<script lang="tsx" setup>
import { Goods } from '@/api/merchant-v2';
import { reactive } from 'vue';
const state = reactive<{
    visible: Boolean;
    goods: Goods[];
}>({
    visible: false,
    goods: [],
});

defineExpose({
    open(args: { goods: Goods[] }) {
        state.visible = true;
        state.goods = args.goods;
    },
    a: 1,
    b: 2,
    log: console.log,
});
</script>
import { createApp } from 'vue';
import LiveRecordGoods from './live-record-goods.vue';

/**
 * 试试动态运行时创建实例,不用直接模板创建实例
 */
export function openRecordGoods(args: { goods: Goods[] }) {
    const app = createApp(LiveRecordGoods);
    const parent = document.createElement('div');
    const instance = app.mount(parent);
    console.log(instance);
    // 获取不到实例的方法
    (instance as any).open(args);
    document.body.appendChild(parent);
}

image image

What is expected?

能够正常获取到export的方法

What is actually happening?

获取不到导出的方法

avatar
Sep 23rd 2021

Should be solved by this already merged PR:

https://github.com/vuejs/vue-next/pull/4606

This is part of 3.2.13