1，使用Vue.extend来创建全局的Vue组件，返回一个模板对象
var com1=new extend({
template:'<h3 >这是一个Vue.extend创建的组件</h3>' //通过template，属性，指定了组件要展示的HTML的结构
})
1.2,使用Vue.component("组件的名称"，创建出来的组件模板对象)
Vue.component("mycom1",com1)
如果使用Vue.component定义全局组件的时候，组件名臣使用了驼峰命名，则在引用组件的时候，大写的
驼峰命名改为小写的字母，两个单词之间用-链接
Vue.component("mycom1",com1)
Vue.compontent第一个参数是组件的名字，标签形式来引入，第二个参数Vue.extend创建的组件，其中template组件的模板展示的内容
以上可以简写为 Vue.component("mycom1",Vue.extend({
template:"<h3>顶顶顶</h3>"
}))
第二种组件创建的方式
Vue.component("mycom2",{
//注意：不论是哪中方式创建出来的组件。组件的template属性属性指向模板的内容，必须只有一个唯一的跟元素
template:"<h3>这是使用vue.compontent创建出来的组件</h3>"
})
使用的时候直接用标签用
<mycom2></mycom2>
第三种组件创建方式
<template id="temp1">
<div>
ss
</div>
</template>
Vue.compontent("mycom3"{
template:”#temp1“
})
定义私有组件
使用的时候可以这样<login></login>
export default {
name: 'HelloWorld',
components:{
login{
template:"<div>这是login组件</div>"
}
},
还可以这样使用
export default {
name: 'HelloWorld',
components:{
lo:{
template:"#temp"
}
},
<template id="temp"><div>dd55555555</div></template>
在模板中调用<lo></lo>
组件中的data
组件的data和实例的data有点不一样，实例的data可以作为一个对象，组件的data必须是一个方法
组件中的data内部，还必须返回一个对象才行
组件中的data数据，使用方式和实例中的data使用方式完全一样
Vue.compontent("mycom1",{
template:"<h1>这是一个全局的组件--{{msg}}</h1>",
data:function(){
return{
msg:"这是组件中data定义的数据"
}
}
})
组件切换方式
<a @click.prevent="flag==true">登陆</a>
<a @click.prevent="flag==false">注册</a>
<login v-if="flag"></login>
<rigister v-else="flag"></rigister>
Vue.component("login",{
template:”<h3>这是登陆组件</h3>“
})
Vue.compontent("register",{
template:”<h3>注册组件</h3>“
})
data:{
flag:true//显示登陆组件
}
局部注册一个组件
var login={
template:"<div>j局部是登陆组建</div>"
}
export default {
name: 'hello',
components:{
Childern,
login,
//定义组件
},
最后在模板中适用<login></login>