一起来学Vue.js【10】

组件基础

组件是可复用的 Vue 实例。在开发过程中把重复的功能封装成组件，达到快捷、便捷开发的目的。Vue.js使用component函数去创建一个组件。component函数的第一个参数是组件的名称，第二个参数是以对象的形式描述一个组件，因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项(一个组件的 data 选项必须是一个函数)。
首先定义了一个< button-counter >组件，该组件用来返回一个count值。它的模板template就是一个显示点击次数的按钮。定义组件要在new Vue之前，因为他是一个全局注册的组件，就像编程语言的全局变量都是放在程序头定义。两者是同一个道理。如果放在new Vue之后，浏览器控制台会报错，没有注册该组件。

定义好以后，将组件放在< html >中。

运行结果：

同时所定义好的组件可以复用，组件各自的count值互不影响。
还可以通过props为组件定义一个属性，在模板中显示属性值，并且在第一个组件上添加定义好的属性。
运行结果非常明显。有添加自定义属性值的组件显示了属性值，而另一个复用组件没有添加自定义属性值，所以没有自定义属性内容。

当想要一个模板显示多个html组件，如果直接添加，并没有看到< button >组件，而且控制台会告诉你这样的写法是错误的。需要一个根元素来包含，或者使用v-if和v-else。

因此，添加一个< div >标签作为根元素包含即可。

以上是关于组件注册，那么注册了一个组件，如何设置组件的事件监听呢。之前做过v-on的单击事件，是在methods里设置函数。这里同理。
changeCnt函数处理按钮单击事件。

通过调用内建的 $emit 方法并传入事件名称来触发一个事件。在事件函数中调用this. $emit(),第一个参数为要触发的事件的名称，第二个参数为携带的值。该事件需要在new Vue的methods方法里创建。
后由注册组件调用。
每次单击前一个按钮，控制台都会显示count的值。从这里可以看出，单击事件一直被Vue所监听。

此外，还可以在模板上设置一个插槽< slot >标签，可以用来在自定义组件内插入html的内容。

例如：

https://cn.vuejs.org/v2/guide/components.html