Задать вопрос
@beduin01
vue

Как в Vue-JS зарегистрировать несколько компонентов?

В документации не нашел примера, как будет выглядеть регистрация двух компонентов.

как-то так?
// register it with the tag <example>
  Vue.component('loginmenu', loginMenu)
  Vue.component('pagefooter', pageFooter)

  new Vue({
    el: '#loginmenu', '#pageFooter'
  })


Просто у меня браузер ругается на строку:
el: '#loginmenu', '#pageFooter'

Вот полный мой код:

window.onload = function() {
   
  var loginMenu = Vue.extend({
    template: `
                <nav class="navbar navbar-default">
                <div class="container-fluid">
                  <div class="navbar-header">
                    <a class="navbar-brand" href="#">
                      <img alt="Brand" src="">
                    </a>
                  </div>
                </div>
              </nav>
              `
  })

  var pageFooter = Vue.extend({
    template: `
                <div class="panel panel-default">
                  <div class="panel-body">
                    Panel content
                  </div>
                  <div class="panel-footer">Panel footer</div>
                </div>
              `
  })



  // register it with the tag <example>
  Vue.component('loginmenu', loginMenu),
  Vue.component('pagefooter', pageFooter)

  new Vue({
    el: '#loginmenu' // как сюда новый компонент добавить?
  })

}


Или на каждый компонент по экземпляру нужно создавать?
  • Вопрос задан
  • 2247 просмотров
Комментировать
Подписаться 2 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 2
@kartio
У объекта Vue указывается привязка к какому-нибудь элементу страницы внутри которой будут уже монтироваться все остальные компоненты, например

var App = Vue.extend({
    template: `
                <loginmenu></loginmenu>
                <pagefooter></pagefooter>
              `
  })

new Vue({
  el: 'body',
  components: {
    app: App
  }
});


<body>
    <app></app>
</body>
Ответ написан
1 комментарий
1 комментарий
gennadiy403
@gennadiy403
В main файле:
import Vue from 'vue'
import App from './App.vue'
import Other from './Other.vue'

new Vue({
  el: '#app',
  template: '<App/><Other/>',
  components: {
    App: App,
    Other: Other
  }
})


App и Other - компоненты, в них уже свой контент
<template>
  <div id="app">
    Hello
  </div>
</template>
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend Vue & Capacitor Developer Middle++
Parasol Software
от 2 000 до 2 500 $
Frontend developer (middle/senior)
//stablecode
от 210 000 ₽
Senior Frontend VueJS (частичная занятость)
Онград+
от 125 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Ошибка в 1с при выгрузке товаров на сайт на Битриксе
25 апр. 2024, в 03:08
3000 руб./за проект
Создание и публикация короткого (reels) UGC-видео на YouTube-канале
25 апр. 2024, в 01:46
500 руб./за проект
Настроить перехват https-трафика для android-приложения
25 апр. 2024, в 01:02
10000 руб./за проект
Ещё заказы