什么是组件
组件是可复用的 Vue 实例， 例如大家之前常用的Bootstrap中下拉框，单选框以及导航栏都可以视为组件 组件的拆分是为了让项目中的代码可复用，例如A页面中用到了导航栏，B页面中也有导航栏，就可以把导航栏的代码单独拿出，作为一个组件，然后将其使用在A页面中和B页面中，这样我们只写了一遍导航栏的代码，而在A、B页面中使用了两次导航栏的代码。通过导航栏组件的使用，使我们极大的提高了开发效率和产生了较低的耦合度。如果导航栏的样式需要修改，只需要修改组件的代码就可以了，如果不使用组件，我们还需要同时修改A页面和B页面的代码
全局组件和局部组件解释
组件按作用域分为全局组件和局部组件
全局组件：在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中
局部组件：在组件或Vue的components 选项中定义你想要使用的组件，并只能应用于其上
组件使用的口诀
- 建子 创建子组件
- 挂子 将子组件挂载到Vue实例上，或挂载到其他组件的Components属性上
- 用子 在template下使用组件或在id为app的标签下使用组件
tips: 一般组件的命名首字母大写用来和h5的标签进行区分
全局组件的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>全局组件的组件的挂载</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
Vue.component("App", {
template: `
<div>
我是全局组件
</div>
`
})
new Vue({
el: "#app",
template: `<App></App>`
})
</script>
</html>
局部组件的使用
效果展示如下↓↓↓↓↓↓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>局部组件的挂载</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 3 和（3） 全局和局部组件的使用 -->
<App></App>
<Com></Com>
</div>
</body>
<script>
// 1. 局部组件的定义
const Com = {
template: `
<div>我是局部组件</div>
`
}
// (1). 全局组件的定义 (2). 已经挂载到Vue对象中
Vue.component("App", {
template: `
<div>
我是全局组件
</div>
`
})
new Vue({
el: "#app",
// 2.局部组件的挂载
components:{
Com
}
})
</script>
</html>
