天天看點

Vue學習日記--貳

Vue的元件

元件是可複用的Vue執行個體

因為元件是可複用的Vue執行個體,是以他們與new Vue接受相同的選項,例如data、computed、watch、method以及生命周期鈎子等。

元件有兩種注冊注冊類型:全局元件和局部元件。

全局元件

全局元件:在全局注冊之後可以被在其注冊之後的任何新建立的Vue根執行個體,也包括其組建樹中的所有子元件模闆中。

Vue.component("component-name",{
	data:function(){
		return {
		}
	}
	template:''
})
           

局部元件

<body>
    <div id="app">
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript" >
    	//全局元件注冊
        Vue.component('gComponent',{
            template:'<h1>我是全局元件</h1>'
        });
		//局部元件注冊
        var App = {
            template:'<div>' +
            '我是局部元件' +
            '<gComponent/>' +//全局元件使用
            '</div>'
        }

        new Vue({
            el:"#app",
            data:function(){
                return{}
            },
            //局部元件挂載
            components:{
                my_component:App
            },
            //局部元件使用
            template:'<my_component/>'
        });
    </script>
</body>
           

元件的介紹就先到這啦。

持續更新中

繼續閱讀