创建组件的方式

注意：不论是哪种方式创建出来的组件，组件的template属性直线的模板内容，必须有且只能有唯一的一个根元素

创建全局组件的三种方式

方式1:使用Vue.extend创建的组件

<div id="app">
<!-- 如果要使用组件，直接：把组件名称，以HTML标签的形式，引入到页面中，即可 -->
 <mycom1></mycom1>
</div>

<script>
//第1步:使用Vue.extend创建的组件，
//得到组件的模板对象
var com1 = Vue.extend({
    template:'<h3>这是使用Vue.extend创建的组件</h3>' //通过template属性，指定了组件要展示的HTML结构
})
//第2步：使用Vue.component('组件的名称'，创建出来的组件模板对象)，
//把模板对象注册为真正的全局组件
//如果使用Vue.component定义全局组件的时候，组件名称使用了驼峰命名，则在引用组价的时候，需要把大写的驼峰改为小写的字母，同时，两个单子之前，使用 - 链接；
//如果不使用驼峰，则直接拿名称来使用即可；
Vue.component('mycom1',com1)

//另一种更简洁的写法
//Vue.component第一个参数：组件的名称，将来在引用组件的时候，就是一个标签形式来引入它的
//第二个参数：Vue.extend 创建的组件，其中template就是组件将来要展示的HTML内容
Vue.component('mycom1',Vue.extend({
    template:'<h3>这是使用Vue.extend创建的组件</h3>' }))

</script>

方式2：直接使用Vue.component创建出来的组件

<div id="app">
<!-- 还是使用标签形式，引入自己的组件 -->
 <mycom2></mycom2>
</div>

<script>
Vue.component('mycom2',{
    template:'<h3>这是直接使用Vue.component创建出来的组件</h3>' })
</script>

方式3：

<div id="app">
 <mycom3></mycom3>
</div>

<!--在被控制的#app外面，使用template元素，定义组件的HTML模板结构-->
<!--把组件的模板结构抽离出来-->
<template id="templ">
 <div>
     <h1>这是通过template元素，在外部定义的组件结构，这个方式，有代码的智能提示和高亮</h1>
     <h4>这就是组件创建的第三种方式</h4>
 </div>
</template>
<script>
Vue.component('mycom3',{
    template:'#templ' 
})
</script>

定义私有组件

<div id="app">
 <login></login>
</div>

<script>
var vm=new Vue({
    el:'#app',
    data:{},
    methods:{},
    components:{//定义实例内部私有组件的
        login:{
          template:'<h1>这是私有的login组件</h1>'
   }
 }
})
</script>

另一种写法

<div id="app">
 <login></login>
</div>

<template id="tmpl2">
  <h1>这是私有的login组件</h1>
</template>

<script>
var vm=new Vue({
    el:'#app',
    data:{},
    methods:{},
    components:{//定义实例内部私有组件的
        login:{
          template:'#tmpl2'
   }
 }
})
</script>