组件化开发指的是根据封装的思想，把页面上可重用的UI结构封装为组件，从而方便项目的开发和维护。
一.vue中的组件化开发
vue是一个支持组件化开发的前端框架。
vue中规定：组件的后缀名为.vue 。之前接触到的App.vue文件本质上就是一个vue的组件。
二.组件的三个组成部分
每个.vue组件都由3个部分构成，分别是：
template ： 组件的模板结构
script ： 组件的JavaScript行为
style ： 组件的样式
注意：在template里面只能有一个根元素，不然会报错。如果组件里面要定义多个元素，要放在一个根div中
比如：
案例：
<template> <div> <h3>这是{{username}}自定义的Test.vue</h3> </div> </template> <script> // export default是默认的写法 export default { //组件里面的data必须是一个函数，不能直接写成data:{} data() { //在return里面写的是一个数据对象，返回定义的数据 return { username: '害恶细菌' } } } </script> <style> div { background-color: #f00; } </style>
定义methods方法
<script> // export default是默认的写法 export default { //组件里面的data必须是一个函数，不能直接写成data:{} data() { //在return里面写的是一个数据对象，返回定义的数据 return { username: '害恶细菌' } }, methods:{ changeName(){ //在组件中，this指向的是组件的实例。 this.username = 'haiexijun' } } } </script>
定义侦听器watch、当前组件中的计算属性computed、过滤器filter
<script> // export default是默认的写法 export default { //组件里面的data必须是一个函数，不能直接写成data:{} data() { //在return里面写的是一个数据对象，返回定义的数据 return { username: '害恶细菌' } }, methods:{ changeName(){ //在组件中，this指向的是组件的实例。 this.username = 'haiexijun' } }, //当前组件的侦听器，当data的值发生改变时触发 watch:{ username(newVal,oldVal){ console.log(newVal,oldVal) } }, //当前组件中的计算属性，只要改变了组件中的数据 computed:{ }, //当前组件中的filters filters:{ } } </script>
发现，只有data要为一个函数形式，其他则定义为对象形式。
如果style要用less，添加一个lang=“less”
<style lang="less"> </style>
三.组件的使用步骤
组件封装好之后，彼此之间是相互独立存在的，不存在父子关系。
在使用组件的时候，根据彼此的嵌套关系，形成父子关系，兄弟关系。
以一个案例来推动学习：
在项目的src目录下面的components目录下，创建两个vue组件，分别是right.vue和left.vue。
下面来介绍使用步骤
步骤1
上面提到了，如果要使用组件，就必须要在一个父组件里面使用它。也就是说，我们components目录里自己定义的所有组件，要在外面的App.vue这个父组件里被使用。
但要想在App.vue这个组件里面使用其他组件，第一步就是在App.vue这个组件里的<script>里面使用import导入要使用的组件。 然后使用components节点注册组件.
<script> import left from './components/left.vue' export default { name: 'App', //在components里面注册组件 components: { left } } </script>
步骤2
在template里的根标签内使用刚才注册的组件。要以标签的形式使用刚才注册的组件
<template> <div id="app"> <left></left> </div> </template>
四.注册全局组件
通过components注册的组件是私有组件。
例如：在组件A的components节点下，注册了组件F。则组件F只能用在组件A中，不能用在其他的组件中。即如果组件C中如果没有用components注册组件F，那么就无法使用。如果一个组件频繁被用到，那使用起来非常地不方便。可以通过注册全局组件来方便使用。
在vue项目的main.js入口文件中，通过Vue.component()方法，可以注册全局组件。
示例代码如下：
//导入需要全局注册的组件 import Count from './components/Count.vue' //Vue.component()的第1个参数为字符串，表示组件的注册名字.第2个参数为需要注册的组件对象 Vue.component('myCount',Count);
