Vue组件基础

一、Vue组件示例

Vue.component('button-counter',{
	data:function(){
		return {
			count:0
		}
	},
	template:`
		<button v-on:click="count++">You clicked me {{ count }} times.</button>
	`
})

这里的data必须是一个function，不能是对象。因为如果是对象，多个组件引用的是相同的data。如果是function，那么每次返回的都是不同的data对象，这样组件之间引用的数据就是独立的。

二、组件的组织

为了能在模板中使用，组件必须先注册以便Vue能够识别。这里有两种组件注册的类型：全局注册和局部注册。

Vue.component('my-component-name', {
  // ... options ...
})

全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。

三、通过Prop向子组件传递数据

Prop即数据，就是你在组件注册的时候可以自定义的特性。当一个值传递给prop特性的时候，它就变成了组件实例的一个属性。

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>

我的理解是：在注册组件的时候，props是一个数组，代表定义在blog-post这个组件上的属性，这个属性分为静态属性和动态属性。
静态属性：当在应用blog-post组件的时候，直接将值赋给title。<blog-post title="My journey with Vue"></blog-post>
动态属性：当在应用blog-post组件的时候，是将变量title赋值给v-bind:title。<blog-post v-bind:title="title"></blog-post>。这个title变量可以通过fetch数据去动态获取。

四、通过事件向父级组件传递消息

比如我们在开发blog-post组件的时候，它的一些功能可能要求我们和父组件进行沟通。比如引入一个可访问性的功能来放大博客文章的字号。同时让页面的其他部分保持默认的字号。
具体思路：

• 首先，创建一个按钮，给按钮绑定click事件，click事件函数需要告诉父组件修改其字号，我们可以调用内建的$emit方法，传入事件的名称（enlarge-text），来向父级组件触发一个事件。
• 在父组件的data里面定义一个postFontSize变量
• 在<blog-post>组件上用v-on来监听enlarge-text事件，然后为这个事件注册事件函数用来改变字体大小。