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`使用
```

```
![](https://images2018.cnblogs.com/blog/1321525/201806/1321525-20180607224922938-1073194676.png)

组件模板

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

	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`选项。

### 静态传递数据

```
![](https://images2018.cnblogs.com/blog/1321525/201806/1321525-20180608073135118-628855038.png)

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

```
![](https://images2018.cnblogs.com/blog/1321525/201806/1321525-20180608074019380-1788600169.gif)

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

```
![](https://images2018.cnblogs.com/blog/1321525/201806/1321525-20180608184102910-347475394.png)

巴特西

Vue - 组件 Prop

组件注册

全局注册

组件模板

组件的复用

最新文章

热门文章