卡在从vue2升级到vue3

Question

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

// The body of class
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) => {

                // works in vue2
                // const floatingButton = new Vue(fabComponent)
                // floatingButton.options(options);
                // floatingButton.$mount(element);

                // what is the equivalent in vue3?
                const app = createApp({});
                app.component('fb',fabComponent);
                const floatingButton = app.use(fabComponent);
                floatingButton.options(options);
                floatingButton.$mount(element);
            });
    }
}

我不太精通 vue，但需要将我的 vue2 小部件（即它可以通过仅包含捆绑的 javascript 加载到任何 HTML 中）升级到 vue3 小部件。

我花了两天的时间来翻译这个，并尝试了几乎所有我能想到的方法来翻译这个

new Vue(fabComponent)

。

Webpack 构建/转换没有错误，但当我尝试在浏览器中加载它时，问题就出现了。在vue2中，

floatingButton

被指定为

Proxy(Object)

，但我似乎无法在vue3中复制它，

floatingButton

是

Object

。结果，

floatingButton.options(options);

抛出一个未捕获的错误。

我可以在 vue3 中按原样使用

new Vue(fabComponent)

，但是我如何获得我的

app

呢？因为

Fab.vue

依赖于另一个

SvgIcon.vue

组件。

有什么想法吗？谢谢你。

Answer 1

升级到Vue3，可以创建多个Vue-app实例。相反，在 Vue2 中，它仅限于一个全局实例。

另一个重大更改是应用程序实例如何绑定到元素（有一个

mount

函数而不是

$mount

）。

要解决您的问题，您可以为查询返回的每个元素创建一个带有

FabComponent

的应用程序实例。

import { createApp } from 'vue';
import FabComponent from './FabComponent.vue';
import SvgIcon from './SvgIcon.vue';

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

    document
      .querySelectorAll('[data-vue-component=FabComponent]')
      .forEach(element => {
         createApp(FabComponent, options)
         .mount(element);
      });
  },
};

window.fab.mount({
  modelValue:'A GLOBAL PROP'
});

网上游乐场