全局元件
元件可以擴充 HTML 元素，封裝可重用的代碼。
元件是可複用的 Vue 執行個體，且帶有一個名字。
1.建立步驟：
建立元件構造器
var myton=Vue.extend({
//data必須是個函數
data:function () {
return{
count:0
}
},
//模闆選項
template:'<div><h1>哈哈哈</h1><button @click="count++">你點選了{{count}}次了</button></div>'
})
注冊一個全局的元件
Vue.component('ton',myton);
使用元件
<div id="app">
<ton></ton>
</div>
全部代碼如下：
<body>
<div id="app">
<ton></ton>
</div>
</body>
<script>
var myton=Vue.extend({
//data必須是個函數
data:function () {
return{
count:0
}
},
//模闆選項
template:'<div><h1>哈哈哈</h1><button @click="count++">你點選了{{count}}次了</button></div>'
})
Vue.component('ton',myton);
new Vue({
el:"#app"
});
</script>
運作結果：
2.可以簡化元件注冊
<body>
<div id="app">
<ton></ton>
</div>
</body>
<script>
Vue.component('ton',{
//data必須是個函數
data:function () {
return{
count:0
}
},
//模闆選項
template:'<div><h1>哈哈哈</h1><button @click="count++">你點選了{{count}}次了</button></div>'
});
//元件注冊必須位于建立vue執行個體之前
new Vue({
el:"#app"
});
</script>
3.全局元件每個vue執行個體都可以用
<body>
<div id="app">
<ton></ton>
</div>
<div id="app1">
<ton></ton>
</div>
</body>
<script>
Vue.component('ton',{
//data必須是個函數
data:function () {
return{
count:0
}
},
//模闆選項
template:'<div><h1>哈哈哈</h1><button @click="count++">你點選了{{count}}次了</button></div>'
});
new Vue({
el:"#app"
});
new Vue({
el:"#app1"
});
</script>
運作結果：
4.注意事項
元件注冊必須位于建立執行個體之前。
一個元件的 data 選項必須是一個函數