Задать вопрос
@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' // как сюда новый компонент добавить?
  })

}


Или на каждый компонент по экземпляру нужно создавать?
  • Вопрос задан
  • 2277 просмотров
Комментировать
Подписаться 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 Developer (Vue/Nuxt)
tactic.team
от 140 000 до 180 000 ₽
Frontend разработчик (Vue)
Creatium
от 150 000 ₽
😃 Frontend developer Vue 💻📱⌚️
Viletech • Москва
от 150 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Графический дизайн + UI/UX для мобильной игры
26 нояб. 2024, в 12:44
50000 руб./за проект
Передача конверсий из AmoCRM на новую сделку и продажу
26 нояб. 2024, в 11:57
10000 руб./за проект
Сверстать по макету
26 нояб. 2024, в 11:39
1000 руб./за проект
Ещё заказы