Как добавить компонент в приложение VueJs3 перед установкой

#vue.js #vue-component #vuejs3

Вопрос:

Я настроил приложение chartApp в качестве своего приложения примерно так:

 const chartApp = {
        data(){
            ...
        },
        methods:{
            async init() {
                //await async menthod
            }
        }
    }

const app = Vue.createApp(chartApp).mount('#app');
app.init();
 

Что работает.

Я могу зайти в консоль браузера, ввести приложение. и увидеть функцию инициализации

Я хочу зарегистрировать компонент. Я попытался настроить приложение следующим образом:

 const chartApp = {
    data(){
        ...
    },
    methods:{
        async init() {
            //await async menthod
        }
    }
}

const app = Vue.createApp(chartApp);
app.component('my-component', {
    template:'<div>hello</div>'
});
app.mount('#app');
app.init();
 

Но я получаю сообщение об ошибке, в котором говорится

app.init не является функцией

на этот раз, когда я смотрю на консоль браузера и набираю приложение. …Я вижу возможность монтирования / размонтирования, но не функцию инициализации.

Я подумал, что, возможно, приложение не удалось смонтировать, поэтому я попробовал: app.mount(‘#app’) в консоли, но получил следующее предупреждение:

Приложение уже смонтировано.

Как я могу зарегистрировать компонент, пожалуйста? Версия VueJs3-3.2.16.

Ответ №1:

В 1-м случае вы вызываете свой init метод по результату mount функции.

Но во втором случае по результату createApp ….что является совершенно другим объектом

Сделай это:

 const app = Vue.createApp(chartApp);
app.component('my-component', {
    template:'<div>hello</div>'
});
const mountedApp = app.mount('#app');
mountedApp.init();