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，在您的app.js中添加一个主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？

1 个答案: