Vue - 组件 Prop

组件注册

全局注册

可在多个vue实例中使用

<div id="app">
	<my-component></my-component>
</div>
<script>
Vue.component('my-component', {
	template: '<div>这是一个组件</div>'
})
new Vue({
	el: '#app'
})
</script>

### 局部注册
局部组件 需要在实例配合`components`使用
```

```

组件模板

组件的模板只能有一个根元素，下面的情况是不允许的

	template: '<p>{{messages}}</p><div>ss</div>'

组件的复用

可以将组件进行任意次数的复用。

当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。

<div id="app">
	<my-component></my-component>
	<my-component></my-component>
	<my-component></my-component>
</div>
<script>
Vue.component('my-component', {
	data: function(){
		return{
			count: 0
		}
	},
	template: '<button v-on:click="count++">You clicked me {{count}} times.</button>'
})
new Vue({
	el: '#app'
})
</script>

### data 必须是一个函数
一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：
```

data: function () {

return {

count: 0

}

}

<br>
## 使用prop传递数据
其实通过不断的学习，我们会发现，其实组件实例的作用域是孤立的。这意味着不能（同时也是不应该）在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的`props`选项。
### 静态传递数据

```

### 动态传递数据
` prop `可以通过 `v-bind` 动态赋值
```

```

### Prop验证
组件可以为 `props`指定验证要求。如果未指定验证要求，Vue 会发出警告。当组件给其他人使用时这很有用。
`prop `是一个对象而不是字符串数组时，它包含验证要求
```

```