1. Chat NodeJS + VueJS
  2. Create Cart Laravel 5.4 +VueJS
  3. Create Form Register using Nodejs + Vuejs
  4. Create QR Code in VueJS
  5. Create Template Vuejs and Laravel 5.4
  6. Deploying Vuejs to Heroku
  7. Hướng dẫn kết hợp Nodejs + Vuejs
  8. Read Data From File Using FileReader API in Vuejs
  9. Passing data from Laravel to Vue
  10. Multiple Subcategories in Laravel 5.8 + Vue
  11. Laravel 5.7 + Vue SPA
  12. Send Mail using Laravel 5.4 + VueJS
  13. Transition in VueJS
  14. Sử dụng Routes trong Vuejs
  15. Sử dụng Props trong Vuejs
  16. Sử dụng Axios Get API trong Vuejs
  17. SHOW DATA VUEJS IN TEMPLATE BLADE LARAVEL
  18. Shopping list using Vuejs
  19. Xây dụng chức năng Register+ Login bằng Laravel 5.4 + VueJS
  20. Video Create Form Register and Login + Chat Real Time Using Nodejs + Vuejs
  21. Using v-for in VueJS
  22. Tạo ứng dụng Laravel 5.4 kết hợp với Vuejs

Sử dụng Props trong Vuejs

min read

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/

x

Ủng hộ tôi bằng cách click vào quảng cáo. Để tôi có kinh phí tiếp tục phát triển Website!(Support me by clicking on the ad. Let me have the money to continue developing the Website!)