Vue的組件可以讓前端開(kāi)發(fā)變得更加模塊化。它可以將一個(gè)web應(yīng)用程序分成多個(gè)小組件，每個(gè)組件負(fù)責(zé)自己的功能，讓代碼更加清晰易懂，便于維護(hù)和升級(jí)。Vue組件可以分為全局組件和局部組件，下面將分別介紹它們的使用方法。
全局組件是在Vue實(shí)例化之前注冊(cè)的組件，可以在任何地方使用。注冊(cè)全局組件可以通過(guò)Vue.component(tag, options)來(lái)完成，其中tag是組件標(biāo)簽名，options是組件選項(xiàng)。其中options中最重要的是template、props和methods。
template屬性是組件模板，可以簡(jiǎn)單理解成HTML代碼，但是需要注意的是，組件中的屬性必須用v-bind綁定，事件必須用v-on綁定，否則會(huì)報(bào)錯(cuò)。例如：
```
Vue.component('my-component', {
template: '
{{ message }}
',
props: ['message'],
methods: {
sayHello: function() { alert('Hello!'); }
}
});
```
props屬性是組件的數(shù)據(jù)傳遞機(jī)制。它接收父組件傳遞的數(shù)據(jù)并在組件內(nèi)部使用。例如：
```
Vue.component('my-component', {
template: '{{ message }}
',
props: ['message']
});{{ message }}
',
props: ['message'],
methods: {
sayHello: function() { alert('Hello!'); }
}
};
new Vue({
el: '#app',
components: { 'my-component': MyComponent }
});
```
在HTML中，可以通過(guò)