运行该命令，编译器不会自动检测新加入的文件）。成功后通过微信开发者工具的模拟器查看，结果界面将会是这样的：
点击“点我呀！”按钮，计数器就会累加点击次数并更新界面上的数字；而点击“清零”按钮，则会将统计数字归零。
回到代码上来看，对于click-counter.vue的使用者index.vue来说，它并不关心太多click-counter.vue的实现细节，引入该组件文件并进行声明，就可以通过标签的形式来使用它了，非常简单明了。而且，这样一个click-counter.vue组件也可以被拿到其他的Vue/mpvue代码中使用，其他使用者也并不需要关注它的实现细节，而只需要关心它能实现什么功能就行了。这就是组件封装带来的好处。
不过，目前的这个click-counter组件还没有跟它的父组件之间有什么交互或通信，没有体现出“暴露接口”的特性，那让我们来增加点代码，了解下这一特性。首先解释一下我们要实现的功能：组件可以接收一个外部设置的初始点击次数值，在点击“点我呀！”按钮的时候，从这个初始值开始进行累加；并且点击按钮后，可以通知组件的使用者（即父组件）当前的点击统计值。
修改click-counter.vue的代码：
修改index.vue的代码：
观察以上修改后的代码可以发现，在click-couter.vue中的主要变化是：
使用props定义了一个名为initNum的数字型组件属性（且初始值为0）。它可用于接收使用组件外部传入的值。然后，这个initNum值被赋值到data中的属性num上作为它的初始值。
在两个按钮的click事件处理方法中，额外调用了一个notifyNum()方法，它向组件触发了一个自定义事件clicknum并携带了当前点击次数值。
而在index.vue中的主要变化是实例化click-counter组件的这行代码：
实例化组件的时候，为组件传入了initNum属性值10；并且添加了一个对自定义事件clicknum的监听方法。
这样一个结构实现了数据进入组件/数据传出组件的机制，父子组件之间就能实现数据通信。通过有限的通信点进行数据互换，而不是直接进行函数调用，可以使得代码结构更优雅、更易维护。
组件的复用性
组件的复用性就好理解的多了，创建组件的目的，大多数时候就是希望这个组件可以被多个地方、多次使用，避免编写重复的代码。比如我们前面的计数器组件，有可能一个项目中的多个页面会用到，也可能一个页面就会使用多次。
Vue组件的复用也是很容易的，比如我们要在前面例子中的index.vue中复用计数器组件，创建3个计数器，那么直接在模板部分编写3个标签就行了:
运行后的效果如下图所示，这三个计数器都能独立统计各自的点击数量：
组件的扩展性
谈到扩展性，有面向对象编程经验的开发者就会想到“继承(extends)”。继承是一种比较有效的扩展机制，不过随着继承的层次变深，代码也会变得难以理解。在Vue组件中，没有采用继承的机制，而是推荐使用“组合”的方式。
在组合理念下，我们尽量将想复用性高的组件设计到最小可拆分单位，比如按钮、输入框、单选框等等，然后再将这些低层组件放入更高层组件中，一层一层，慢慢拼装出满足需求的业务界面。
除了组合，Vue组件还提供了插槽(Slot)功能，相当于在一个组件中挖出了一个或多个坑，在具体使用这些具有插槽的组件时，可以选择往坑里面填什么内容（其他组件）。
举个例子，在计数器组件中，我们在清零按钮后面用<slot></slot>挖了一个坑：
而后，在index.vue中使用计数器组件时，在<click-counter>标签体中放入了额外的内容，会被传入该组件中去用于填坑：
从运行结果可以看到，清零按钮后面已经多出了我们传入的复选框和文字内容:
本文地址：IT问答频道 https://www.hkm168.com/itwenda/942089_3.html，易企推百科一个免费的知识分享平台，本站部分文章来网络分享，本着互联网分享的精神，如有涉及到您的权益，请联系我们删除，谢谢！
相关阅读
