Props trong Vuejs dùng để làm gì? Đó là một câu hỏi mình thấy trên mạng đang hỏi  rất nhiều và giờ chúng ta làm demo mới có thể thấy rõ được Props dùng để làm gì nhé, Props dùng để truyền dữ liệu data từ Cha->Con(Parent to Child), và các component con có thể truyền thông báo đến các component cha thông qua sự kiên. 

Props còn có thể động và tỉnh, nếu bạn muốn động thi bạn phải khai báo v-bind( <my-list v-bind:message="title"></my-list>) còn tỉnh thì bạn chỉ cần( <my-list message="title"></my-list>).

Bạn cũng biết là Mỗi instance của component có một phạm vi nhất định, điều đó đồng nghĩa với bạn không thể tham chiếu đến component cha trực tiếp trong template của component con.

Để làm được bài này bạn phải cài đặt vue vào thư mục Project của mình nhé, bạn có thể xem lại bài Xây dụng Components trong VueJS

Đầu tiên bạn tạo một file props-vuejs.html trong thư mục project vừa cài đặt thông quan npm install vue

<div id="app-component">
		<nav class="lists">
		  <ul>
		    <my-list v-bind:message="title"></my-list>
		  </ul>
		</nav>
</div>

Để đưa dữ liệu ra <my-list> bạn tạo cho mình một đoạn code vuejs như sau:

<script type="text/javascript">
	Vue.component('my-list',{
		template: "<li>{{message}}</li>",
		props: ['message']
	
		
	});
	new Vue({
		el:"#app-component",
		data(){
			return{
				title:"Xin chào bạn đến với Vuejs",
			}
		}

	});

Trong đoạn code bên trên Vue.component nó cần được khai báo vị trí của template cần được hiển thị, new Vue nó sẽ gọi và cài đặt tại vị trí có id="app-component", Nếu bạn muốn for dữ liệu thì bạn làm như sau:

<div id="app-component">
		<nav class="lists">
		  <ul>
		    <my-list v-bind:message="title" v-for="title in comments"></my-list>
		  </ul>
		</nav>
	</div>

Và file bạn viết thêm một data chứa mảng danh sách comments như sau:

Vue.component('my-list',{
		template: `<li><a href="#">{{title}}</a></li>`,
		props: ['title']
		
	});
	new Vue({
		el:"#app-component",
		data(){
			return{
				message:"Xin chào bạn đến với Vuejs",
				comments: [
			             'Tại sao học Vuejs',
			             'So sánh Vuejs với Angular v2',
			             'Vuejs có tác dụng gì?'
			    ]
			}
		}


	});

Còn nếu bạn không muốn chèn template và không viết code giống bên trên thì bạn có thể làm cách dưới đây

<div id="app-component">
		<nav class="lists">
		  <ul>
		    <my-list v-bind:commentpost2="comment2" v-for="comment2 in comments"></my-list>
		  </ul>
		</nav>
	</div>
	<script id="template-app" type="text/x-template">
		<li><a href="#">{{commentpost2}}</a></li>
	</script>

Bạn chú ý bạn sẽ nhìn thấy một id="template-app" và id này nó sẽ được khai báo trong Vue.component các bạn nhìn code bên dưới này nhé

Vue.component('my-list',{
		template: "#template-app",
		props: ['commentpost2']
	
		
	});
	new Vue({
		el:"#app-component",
		data(){
			return{
				message:"Xin chào bạn đến với Vuejs",
				comments: [
			            'Tại sao học Vuejs!',
			           'So sánh Vuejs với Angular v2',
			          'Vuejs có tác dụng gì?'
			    ]
			}
		}


	});

Các bạn có thể xem thêm tại đây:https://css-tricks.com/intro-to-vue-2-components-props-slots/