Vue中props属性的使用和理解

Vue中的props：主要用于获取父组件传过来的数据。

话不多说，先上代码，再做分析：

1
2
3
4
5
6
7
8
<div id="posts">
			<blog-post
			  v-for="post in posts"
			  v-bind:key="post.id"
			  v-bind:postss="post"
			></blog-post>
		</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Vue.component('blog-post', {
		  props: ['postss'],
		  template:
		  `
		  <div class="blog-post">
		  <h3>{{ postss.title }}</h3>
		  <div v-html="postss.content"></div>
		  </div>
		`
		});
		
		
		var app2 = new Vue({
			el:'#posts',
			data:function(){
				return {
					posts:[
						{id:1, title:'syz', content:'this is my name'},
						{id:2, title:'zjw', content:'this is my grilfriend's name'}
					]
				}
			}
		})

说明：

1.首先注册组件，blog-post，尽量使用kebab-case短横线格式命名组件名。
2.组件中使用了for循环，循环遍历app2对象中的posts列表，绑定key，确定每个组件都是唯一的,绑定post整个列表对象到属性postss。
3.在组件注册时，定义了prop属性，用于接收确定的父组件传来的数据，这里我为了区分，写成了postss,postss接受的是post列表属性，然后在template模板中获取列表中相关的属性指。

总结：

props传入的可以是一个列表，也可以传入动态的数据，它里面的数据可以用来传递一个初始值，和Python一样，如果传入的是一个对象，则传入的数据是一个引用，因此会指向同一个组件，所以改变子组件有可能会影响到父组件的数据。

No small steps, no small streams, no river or sea