1. 程式人生 > >Vue使用props傳遞資料

Vue使用props傳遞資料

1. Vue使用props傳遞資料

元件不僅僅是用來進行內容的複用,更重要的是元件之間的要進行通訊。通常父元件的模板中包含子元件,父元件要正向的向子元件傳遞資料或引數,子元件接受到後根據引數額不同來渲染不同的內容或執行操作。這個正向傳遞的過程就是通過props來實現的。

在元件中,使用選項props來宣告需要從父級接受的資料,props的值可以是兩種,一種是陣列,一種是物件。

陣列的方式:props後邊是陣列的形式

<div id="app">
		<my-component></my-component>
	</div>

	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
	<template id="myComponent">
		<div message='來自父元件的資料'></div>
	</template>
	
	<script type="text/javascript">
		Vue.component('my-component',{
			props:['message'],
			template : '#myComponent',
		});

		new Vue({
			el:"#app",
		});
	</script>	

渲染的結果是:

props與data函式中return的資料的主要區別:props是來自父級,而data中的是元件自己的資料。作用域是元件的本身。這兩種資料都可以在模板template以及計算屬性和mothods中使用。(作用的區域不同)

有的時候從父級傳遞過來的資料並不是寫死的,而是來自父級的動態資料,這時候使用指令v-bind來動態繫結props的值,當父元件的資料發生變化的時候,也會傳遞給子元件。  很好的一個例子:如下

<div id="app">
		<input type="text" v-model="parentMessage">
		<my-component :message="parentMessage"></my-component>
	</div>

	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
	<template id="myComponent">
		<div :message='message'>{{message}}</div>
	</template>
	
	<script type="text/javascript">
		Vue.component('my-component',{
			props:['message'],
			template : '#myComponent',
		});

		new Vue({
			el:"#app",
			data:{
				parentMessage:''
			}
		});
	</script>	

2 單向資料流

Vue2.0以後就開始的是單向資料流,意思是父元件可以給子元件傳遞資料,但是反過來不行。在Vue1.0可以通過.sync修飾符來支援雙向傳遞。Vue2.0這樣設計的好處是讓父元件和子元件之間解耦。在JS中物件和陣列是引用型別,指向的同一個地址,所以當子元件發生改變了,父元件也會隨之改變。為了避免這種情況的發生,採用的單向資料流。

大多數的業務中,子元件接受到了父元件的資料,會進行改變...  所以處理這種情況常採用以下的兩種方式。

1. 在元件data中再宣告一個數據引用父元件傳來的資料,然後在子元件對新宣告的資料進行操作即可,例子:

<div id="app">
		<my-component :message="111"></my-component>
	</div>

	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
	<template id="myComponent">
		<div :message='newData'>{{newData}}</div>
	</template>
	
	<script type="text/javascript">
		Vue.component('my-component',{
			props:['message'],
			template : '#myComponent',
			data: function(){
				return{
					newData: this.message,
				}
			}
		});

		new Vue({
			el:"#app",
			data:{
				parentMessage:''
			}
		});
	</script>	

2. 另一種情況是prop作為需要被轉變的原始值傳入。這種情況用計算屬性。比如這種情況,用CSS傳遞寬度的時候要帶單位(px),但是每次寫很麻煩,而且數值計算一般不帶單位的,所以統一在元件的計算屬性中就可以了