Component là các đối tượng Vue có thể sử dụng lại được, có thể dùng component như là một phần tử bên trong đối tượng Vue gốc được tạo bởi new Vue
Đây là ví dụ về một component trong Vue:
// Định nghĩa một component với tên là "button-counter"
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">Bạn đã bấm {{ count }} lần.</button>'
})
Sử dụng component
<div id="components-demo">
<button-counter></button-counter>
</div>
new Vue({ el: '#components-demo' })
Có thể tái sử dụng component bao nhiêu lần tùy ý:
<div id="components-demo">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
Tham khảo code chạy thực tế: https://codepen.io/anh-kevin/pen/rNVmJbj