vue-3.2-组件的三种定义方式
1. 什么是组件：组件的出现，就是为了拆分Vue实例的代码量，能够让我们以不同的组件，来划分不同的功能模块，将来需要什么样的功能，就去调用对应的组件即可；
2. 模块化：是从代码的角度进行划分的；方便代码分层开发，保证每个模块的职能单一；
3. 组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用！
定义组件的三种方式：
第一种：
<body>
<div id="app">
<!--如果使用组件，直接把组件的名称，以HTML标签的形式，引入到页面中，即可-->
<mycom1></mycom1>
</div>
<script>
// 1.1 使用 Vue.extend 来创建全局的 Vue 组件
var com1 = Vue.extend({
template:'<h3>这是使用 Vue.extend 创建的组件</h3>' // 通过 template 属性，指定了组件要展示的HTML结构
})
// 1.2 使用 Vue.component('组件的名称'，创建出来的组件模板对象)
// Vue.component('myCom1', com1)
// 如果使用 Vue.component 定义全局组件的时候，组件名称使用了 驼峰命名，则在引用组件的时候，需要把 大写的驼峰改为小写的字母，同时，两个单词之间，使用 - 链接；
// 如果不适用驼峰，则直接拿名称来使用即可；
Vue.component('mycom1', com1)
var vm = new Vue({
el: '#app',
data: {
},
methods: {
}
})
</script>
</body>
第二种：
<body>
<div id="app">
<mycom2></mycom2>
</div>
<script>
/*注意：不论是那种方式创建出来的组件，组件的template 属性指向的模板内容，必须有且只能有唯一的一个根元素*/
Vue.component('mycom2', {
template:'<div><h3>这是直接使用 Vue.component 创建的组件</h3><span>span元素</span></div>' // 通过 template 属性，指定了组件要展示的HTML结构
})
var vm = new Vue({
el: '#app',
data: {
},
methods: {
}
})
</script>
</body>
第三种：
<body>
<div id="app">
<mycom3></mycom3>
</div>
<div id="app2">
<mycom3></mycom3>
<login></login>
</div>
<template id="tmpl">
<div>
<h1>这是通过 template 元素，在外部定义的组件结构，这个方式，有代码的智能提示和高亮</h1>
<h4>vue-template</h4>
</div>
</template>
<template id="tmpl2">
<h1>这是私有的login组件</h1>
</template>
<script>
/*注意：不论是那种方式创建出来的组件，组件的template 属性指向的模板内容，必须有且只能有唯一的一个根元素*/
Vue.component('mycom3', {
template:'#tmpl'
})
var vm = new Vue({
el: '#app',
data: {
},
methods: {
}
})
var vm2 = new Vue({
el:'#app2',
data:{},
methods:{},
filters:{},
components:{ // 定义实例内部私有组件
login:{
template:'#tmpl2'
}
}
})
</script>
</body>
