Vue组件是Vue.js中最重要的概念之一,它可以让我们将页面拆分成多个独立的、可复用的模块,从而提高代码的可维护性和可复用性。Vue组件分为全局组件和局部组件两种。
1. 全局组件
全局组件是在Vue实例化之前定义的组件,可以在任何Vue实例的模板中使用。定义全局组件的方式有两种:
- 使用Vue.component()方法:
```javascript
Vue.component('my-component', {
// 组件选项
})
```
- 使用Vue.extend()方法:
```javascript
var MyComponent = Vue.extend({
// 组件选项
})
Vue.component('my-component', MyComponent)
```
2. 局部组件
局部组件是在Vue实例化之后定义的组件,只能在该Vue实例的模板中使用。定义局部组件的方式有两种:
- 在Vue实例的components选项中注册:
```javascript
var vm = new Vue({
el: '#app',
components: {
'my-component': {
// 组件选项
}
}
})
```
- 在Vue实例的template选项中定义:
```javascript
var vm = new Vue({
el: '#app',
template: `
<div>
<my-component></my-component>
</div>
`,
components: {
'my-component': {
// 组件选项
}
}
})
```
总的来说,全局组件适用于在多个Vue实例中共享的组件,而局部组件适用于只在当前Vue实例中使用的组件。