为什么要组件化开发？
有时候页面代码量太大，逻辑太多或者同一个功能组件在许多页面均有使用，维护起来相当复杂，这个时候，就需要组件化开发来进行功能拆分、组件封装，已达到组件通用性，增强代码可读性，维护成本也能大大降低。
组件化很大程度上降低系统各个功能的耦合性，并且提高了功能内部的聚合性。这对前端工程化及降低代码的维护来说，是有很大的好处的，耦合性的降低，提高了系统的伸展性，降低了开发的复杂度，提升开发效率，降低开发成本。
组件有什么特性？
- 专一性 一个组件只专注做一件事，且把这件事做好。
- 可配置性 一个组件，要明确它的输入和输出分别是什么，要做可配置性，最基本的方式是通过属性向组件传递配置的值，而在组件初始化的生命周期内，通过读取属性的值做出对应的显示修改。还有一些方法，通过调用组件暴露出来的函数，向函数传递有效的值；修改全局
CSS样式；向组件传递特定事件，并在组件内监听该事件来执行函数等。- 标准性 任何一个组件都应该遵守一套标准，可以使得不同区域的开发人员据此标准开发出一套标准统一的组件。
- 复用性 任何一个组件应该都是一个可以独立的个体，可以使其应用在不同的场景中。
在Vue中，组件化开发是核心的支柱和特性。Vue分别提供了局部和全局组件供使用。
今天我们说一下局部组件的创建和使用。
<div id="app">
<App></App>
</div>
<script>
// 注意：在组件中这个data必须是一个函数,返回一个对象
const App = {
data(){
return {
msg:'我是App组件'
}
},
template:`
<div>
<h3>{
{msg}}</h3>
<button @click='handleClick'>按钮</button>
</div>
`,
methods: {
handleClick(){
this.msg = '我被改变了'
}
}
}
new Vue({
el:'#app',
data:{
},
components: {
// 挂载子组件
App
}
});
</script>
局部组件的创建方式是const 组件名 = { } 的形式。
{ }内的代码格式和创建Vue实例中的形式很类似。
但是需要注意的是，我们在创建Vue实例的时候，实例内的data是data:{ }的格式，但是组件中的data必须是一个函数，返回一个对象，data(){ return{ } }。 其他的属性和Vue实例中的基本一致。
最重要的就是这个template属性，我们可以把需要封装的html内容放到这里，在例子中，我写了一个h3标签和一个button标签，并且给button绑定了点击事件，事件的内容我们依然写到了methods中。
这样就完成了一个基本的组件的封装。
组件我们已经封装好了，下面要做的事情就是挂载，把封装好的组件挂载到我们需要的Vue实例上，components就是实例中挂载组件的属性，组件的名字要和创建时保持一致，例子中我写的App。
到现在为止我们已经完成了组件的封装和挂载，接下来就是使用了。使用的方式很简单，就像我们使用其它组件时一样，<组件名></组件名>。
然后我们看一下效果：
在页面的div中，我们只写了一个App标签，但是渲染到页面上的有h3标签和button标签，我们是通过自定义组件来完成的，这就是组件的意义。
然后我们点一下按钮，因为我们在封装组件时，也写了点击事件的内容，看看是否奏效。
没有问题。
这样我们就完成了局部组件的封装、挂载和使用。
有微信小程序课设、毕设需求联系个人QQ：505417246
关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号，请大家多多关注，谢谢！
