How to register multiple components in Vue-JS?

B

beduin012015-12-27 14:08:58

Vue.js

beduin01, 2015-12-27 14:08:58

I did not find an example in the documentation of how the registration of two components will look like.

something like this?

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

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

It's just that my browser swears at the line:
el: '#loginmenu', '#pageFooter'

Here is my complete code:

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

}

Or do you need to create an instance for each component?

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

K

kartio, 2016-01-07
@kartio

The Vue object specifies a binding to some element of the page inside which all other components will already be mounted, for example

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

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

<body>
    <app></app>
</body>

G

Gennadiy Balachkov, 2017-07-14
@gennadiy403

In main file:

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 and Other are components, they already have their own content

<template>
  <div id="app">
    Hello
  </div>
</template>