Vue组件化开发
一、什么是组件化：
- vue.js 有两大法宝，一个是数据驱动，另一个就是组件化
- 把一个复杂的问题，拆解成多个简单的可解决的小问题进行逐个解决
- 所谓组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。 因为组件是资源独立的，所以组件在系统内部可复用，组件和组件之间可以嵌套，如果项目比较复杂，可以极大简化代码量，并且对后期的需求变更和维护也更加友好。
- Vue组件注册 分为：全局注册和局部注册区别：全局组件是挂载在 Vue.options.components 下，而局部组件是挂载在 vm.$options.components 下，这也是全局注册的组件能被任意使用的原因。
二、组件的分类 一般来说，组件大致可以分为三类：
- 页面级别的组件。
- 业务上可复用的组件。
- 与业务无关的独立组件
<div id="app">
<!-- 组件化开发基本步骤：
1.创建组件构造器对象（Vue.extend）
2.注册组件 (Vue.component)
3.使用组件 <组件标签名></组件标签名>
-->
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div>
<script src="Vue_Js/vue.js"></script>
<script>
//创建组件构造器
var cpnV = Vue.extend({
template: `
<div>
<h3>这是标题<h3>
<span>哦 哈哈哈哈</span>
</div>
`
})
//注册组件（全局 意味着可以在多个Vue实例中使用）
Vue.component("cpn", cpnV)
let vm = new Vue({
el: "#app",
data: {
},
methods: {
},
})
</script>
//局部组件（意味着只能在本Vue实例中使用这个组件）
methods: {
},
filters:{
formatStr:function(msg){
var x='a'
var y='b'
var obj=msg
return `${x}-${obj}-${y}`
}
},
components:{
//cpn 组件标签名 cpnV这是组件构造器对象名称
cpn:cpnV
}
1.页面级别的组件：
页面级别的组件，通常是pages目录下的.vue组件，是组成整个项目的一个大的页面。一般不会有对外的接口。我们通常开发时，主要就是编写这种组件。如下所示：pages下面的Home.vue(主页)和About.vue(关于我们)等都是一个独立的页面，也是一个独立的组件。
pages
├─ About.vue
└─ Home.vue
2.业务上可复用的组件：
这一类组件通常是在业务中被各个页面复用的组件，这一类组件通常都写到components目录下，然后通过import在各个页面中使用.这一类组件通常是实现某个功能，比如外卖中各个页面都会使用到的评分系统。这个部分就可以实现评分功能，可以写成一个独立的业务组件。比如下面的components中的Star.vue就是一个业务组件。这一类组件的编写通常涉及到组件常用的props,slot和自定义事件等。
components
└─ Star.vue
3.与业务无关的组件：
这一类组件通常是与业务功能无关的独立组件。这类组件通常是作为基础组件，在各个业务组件或者页面组件中被使用目前市面上比较流行的ElementUI和iview等中包含的组件都是独立组件。如果是自己定义的独立组件，比如富文本编辑器等，通常写在utils目录中。
