Как передать Vue-JS несколько компонентов?

Я не могу понять, должен ли я создать новый экземпляр vue, или я могу использовать один экземпляр и вставить в него все необходимые компоненты. Если да, то как я могу это сделать. Вот мой код:Как передать Vue-JS несколько компонентов?

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?? 
    }) 


}

источник

2015-12-27 Dmitry Bubnenkov

В основном файле, например 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 
    } 
    })

источник

2015-12-28 13:42:19

Как передать Vue-JS несколько компонентов?

ответ

Смежные вопросы