如何传递给 Vue-JS 几个组件？

Question

我不明白我应该创建一个新的 vue 实例，还是可以使用一个实例并将所有需要的组件放入其中。如果是，我该怎么做。这是我的代码：

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' //how pass another templates here??
  })


}

Answer 1

在您的主文件中，例如 index.html，添加一个主 js 文件，app.js 在您的 app.js 中包含所有组件。像这样

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
  </head>
  <body>
    <loginmenu></loginmenu>
    <pagefooter></pagefooter>
    <script type="text/javascript" src="app.js"></script>
  </body>
</html>

app.js

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: 'body',
    components:  {
        'loginmenu': loginMenu,
        'pagefooter', pageFooter
    }
  })

如何传递给 Vue-JS 几个组件？

How to pass to Vue-JS several components?

vue.js