在注册一个组建的时候,我们需要给组件一个名字
Vue.component('my-component-name',{/*...*/})
例如:此组件的名字是my-component-name是该组件的第一个参数
注意:在起名的时候要遵循W3C的规范中的自定义组件名(字母全小写且必须包含一个连字符),防止与现在和未来的html标签发生冲突
组件注册分为全局注册和局部注册
全局注册
全局注册是指注册组件可以在任何新创建的vue实例中使用,在所有子组件中也是如此,也就是说这每个组件可以在组件在各自内部也都可以相互使用。
<div id="app">
<component-a></component-a>
<component-b></component-b>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
Vue.component('component-a',{
data(){
return{
count:0
}
},
template:'<button v-on:click="count++">被点击{{count}}次</button>'
})
Vue.component('component-b',{/*..*/})
const app=new Vue({
el:"#app",
})
</script>
局部注册
通过JavaScript对象来定义组件
var ComponentA={/*....*/}
var ComponentB={/*.....*/}
然后在vue实例当中components
选项当中定义要使用的组件
特别的,局部组件不能在子组件当中使用