Vue2升级Vue3遇组件实例化与方法调用问题，求解决方案

核心问题分析 #

你当前的写法错误在于：app.use(fabComponent) 返回的是Vue3的App实例，而非Fab组件的实例，所以调用options方法会报错。另外需要正确注册依赖的SvgIcon组件，同时调整组件实例的获取方式。

解决方案步骤 #

1. 正确创建组件实例并挂载 #

Vue3中替代Vue2 new Vue(fabComponent) 的方式是直接用createApp传入组件选项，挂载后获取组件实例：

// import Vue from "vue"; // vue2
import { createApp } from 'vue' // vue3
import fabComponent from "./components/Fab.vue";
import SvgIcon from "./components/SvgIcon.vue";

window.fab = {   
    mount(options) {
        var html = '<div data-vue-component="FabComponent"></div>';
        document.body.insertAdjacentHTML('beforeend', html);

        document
            .querySelectorAll("[data-vue-component=FabComponent]")
            .forEach((element) => {
                // 创建Fab组件的App实例，同时注册依赖的SvgIcon全局组件
                const app = createApp(fabComponent);
                app.component('SvgIcon', SvgIcon); // 注册全局组件，Fab.vue中就能直接用<SvgIcon>
                
                // 挂载组件到目标元素，获取组件实例
                const floatingButton = app.mount(element);
                
                // 调用组件的options方法
                floatingButton.options(options);
            });
    }
}

2. 适配Fab.vue的Vue3写法（选项式API兼容） #

你的Fab.vue用的是选项式API，Vue3完全兼容这种写法，无需改成<script setup>，当前代码可以直接使用。注意如果要在模板中使用options方法设置的属性，需要在data中声明响应式变量，保证属性变更能触发视图更新：

<script>
// Fab.vue
export default {
    name: 'FabComponent',
    data() {
        return {
            // 提前声明需要响应式的属性，比如options会传入的title、icon等
            // title: '',
            // icon: ''
        }
    },
    methods: {
        options(options) {
            Object.keys(options).forEach(key => {
                this[key] = options[key];
            });
        },
        alert() {
            alert('You have clicked me :)');
        }
    }
}
</script>

3. 可选：改成<script setup>写法 #

如果想改用Vue3的<script setup>语法，需要用defineExpose暴露options方法，让外部实例能调用：

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

// 用reactive定义响应式状态
const state = reactive({
    // 初始化属性
});

const options = (options) => {
    Object.keys(options).forEach(key => {
        state[key] = options[key];
    });
}

const alert = () => {
    alert('You have clicked me :)');
}

// 暴露方法给外部实例调用
defineExpose({
    options,
    alert
})
</script>

此时挂载后的实例调用floatingButton.options(options)依然有效，模板中需通过state.xxx访问属性。

关键说明 #

• Vue3中createApp(component)会创建一个以该组件为根的应用实例，app.mount(element)返回的是根组件的实例，这才是你需要调用options方法的对象。
• 依赖的SvgIcon组件可以选择在App实例上全局注册，或者在Fab.vue的components选项中局部注册（选项式API），也可以在<script setup>中直接导入使用。

内容的提问来源于stack exchange，提问作者bilogic