Vue.js 组件

Vue组件就是可复用的Vue实例，把经常使用的功能封装成组件然后在使用时能够更便捷。Vue.js使用Vue.component()函数来创建组件，Vue.component()
的第一个参数是组件的名称，第二个参数以对象的形式去描述一个组件。因为组件是可复用的Vue实例，所以它们与new Vue()接收相同的选项，例如data、
computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。

<div id="app">
       <button-counter title="点击次数："></button-counter>
</div>

Vue.component('button-counter', {
	props: ['title'],//添加一个title属性
	data: function () {
	    return {
	        count: 0
	}
	},
	template: '<button v-on:click="count++">{{title}} You clicked me {{ count }} times.</button>'//模板内容
})
var vm = new Vue({
      el: "#app",
      data: {
      }
})

我们要注意，一个组件的模板（就是template后面那个）必须具备一个根节点，比如当template是这样时：

template: '<h1>Hi.....</h1><button v-on:click="count++">{{title}} You clicked me {{ count }} times.</button>'

模板中的元素就不会正常渲染，但当我们像下面这样用一个

标签把两个组件包裹起来：

template: '<div><h1>Hi.....</h1><button v-on:click="count++">{{title}} You clicked me {{ count }} times.</button></div>'

这样两个组件都会正常渲染。下面我们来看一下组件的事件监听，我们将上面的v-on:click="count++"改为v-on:click=“clickfun”，即把一个JavaScript脚本
改成一个可执行的JavaScript函数。然后我们使用methods属性去声明对应的JavaScript函数，在函数内部我们用this对象，对它的变量进行加一处理。我们
还可以通过this对象的$emit()方法去触发一个事件，该方法的第一个参数是事件名称，第二个参数是一些可携带的参数。

Vue.component('button-counter', {
	props: ['title'],//添加一个title属性
	data: function () {
	    return {
	        count: 0
	}
	},
	template: '<div><h1>Hi.....</h1><button v-on:click="clickfun">{{title}} You clicked me {{ count }} times.</button></div>'，
	methods:{
	        clickfun: function () {
	               this.count ++;
	               this.$emit('clicknow', this.count);
	        }
	}
})

在组件的父级就可以通过事件绑定的方式接收到emit函数所触发的事件:

<button-counter title="点击次数：" @clicknow="clicknow"></button-counter>

我们在页面上同样使用methods属性来声明clicknow方法：

var vm = new Vue({
      el: "#app",
      data: {
      },
      methods:{
              clicknow: function (e) {
	   console.log(e);
              }
      }
})

我们接受了一个参数，并打印了这个参数，可以通过浏览器中的右键检查打开控制台标签（console），之后点击按钮观察效果。
我们还可以通过标签来形成组件插槽，通过这个插槽在组件的标签内部我们可以插入一些自定义的HTML内容：

template: '<div><h1>Hi.....</h1><button v-on:click="clickfun">{{title}} You clicked me {{ count }} times.</button></div>',

<button-counter title="点击次数：">
        <h2>Hello Vue</h2>
</button-counter>

提示

嗯…如果有人想直接粘贴代码测试的话注意一下逗号，我也不知道有几个忘换成英语逗号了。