1. 程式人生 > >vue基礎2元件化

vue基礎2元件化

vue元件化
1**.生出子**

 //宣告入口元件 物件的方式
         var mybody={
            template:'<div>我是身體</div>'
        }
        var myfooter={
            template:'<div>我是尾部</div>'
        }
  1. 宣告子
var App={
            template:'<h1>我是入口元件</h1>',
            //宣告
            components:{
                'my-header':myheader,
                'my-body':mybody,
                'my-footer':myfooter
            },
            //呼叫
            template:`
                <div>
                     <my-header></my-header>
                    <my-body></my-body>
                    <my-footer></my-footer>
                </div>
            `
        }

3.使用子

new Vue({
            el:"#app",
            components:{//宣告要用的元件們
                //key是元件名,value是元件物件
                app:App
            },
            template:'<app/>' //入口元件
        })