如何将几个组件传递给Vue JS

我不明白我应该创建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??
  })

}

在主文件中，例如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
    }
  })

相关内容

最新更新

热门标签：