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>
元件的介紹就先到這啦。
持續更新中