# 一、组件的基本使用
# 1.1 注册组件
注册组件就是利用
Vue.component()方法，先传入一个自定义组件的名字，然后传入这个组件的配置
Vue.component('mycomponent',{
template: `<div>这是一个自定义组件</div>`,
data () {
return {
message: 'hello world'
}
}
})
@前端进阶之旅: 代码已经复制到剪贴板
如上方式，就已经创建了一个自定义组件，然后就可以在Vue实例挂在的DOM元素中使用它
<div id="app">
<mycomponent></mycomponent>
<my-component></my-component>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
},
components: {
'my-component': {
template: `<div>这是一个局部的自定义组件，只能在当前Vue实例中使用</div>`,
}
}
})
</script>
@前端进阶之旅: 代码已经复制到剪贴板
直接使用
Vue.component()创建的组件，所有的Vue实例都可以使用。还可以在某个Vue实例中注册只有自己能使用的组件
var app = new Vue({
el: '#app',
data: {
},
components: {
'my-component': {
template: `<div>这是一个局部的自定义组件，只能在当前Vue实例中使用</div>`,
}
}
})
@前端进阶之旅: 代码已经复制到剪贴板
# 1.2 模板的要求
注意：组件的模板只能有一个根元素。下面的情况是不允许的
template: `<div>这是一个局部的自定义组件，只能在当前Vue实例中使用</div>
<button&g
