YuShu Hsiao

1.props 基礎用法(靜態/動態傳遞資料進入template)

template透過props傳參數進來，如果template裡面對應的參數有大寫(EX:駝峰式命名)，

在HTML綁定的時候，要改為小寫，並且用-分開，以下面為例

template內對應的props變數名稱是imgUrl，在HTML不管是動態或是靜態傳遞參數，

都要改為 img-url (U改小寫，前面用-分開)

div id="app">
 <h2>靜態傳遞</h2>
  <!-- 綁定的變數imgUrl => 在這邊要改大寫改為小寫，並且為用-分開-->
  <!-- 靜態傳遞參數的時候不需要使用:-->
  <photo img-url="https://images.unsplash.com/photo-1522204538344-922f76ecc041?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=50e38600a12d623a878983fc5524423f&auto=format&fit=crop&w=1351&q=80"></photo>
 <h2>動態傳遞</h2>
  <!-- v-bind -->
  <photo :img-url="url"></photo>
</div>

<script type="text/x-template" id="photoTemplate">
  <div>
  <!-- 傳進來的參數是:imgUrl => 駝峰式命名 -->
  <img :src="imgUrl" class="img-fluid" alt="" />
  <p>風景照</p>
  </div>
</script>

<script>
Vue.component('photo', {
  props: ['imgUrl'], // 對應template內的變數命名
  template: '#photoTemplate'
});

// var phoObject = {
//     props: ['imgUrl'], // 對應template內的變數命名
//     template: '#photo'
// };

var app = new Vue({
	el: '#app',
	data: {
		url: 'https://images.unsplash.com/photo-1522204538344-922f76ecc041?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=50e38600a12d623a878983fc5524423f&auto=format&fit=crop&w=1351&q=80'
	},
	// components: {
	//     photo: phoObject
	// }
});
</script>

2. 維持單向數據流

處理 props的時候，盡量維持單向數據流的觀念

從外部props到component內部的資料，不應該被變更，如果要變更，

需使用data宣告一個新的變數

<div id="app">
 <h2>單向數據流</h2>
 <photo :img-url="url"></photo>
 <p>修正單向數據流所造成的錯誤</p>
</div>

<script type="text/x-template" id="photoComponent">
<div>
  <img :src="imgUrl" class="img-fluid" alt="" />
  <!-- 
    原本是直接綁定透過props傳進來的 imgUrl，
	<input type="text" class="form-control" v-model="imgUrl">
	改為綁定透過data return 的物件屬性 newUrL
  -->
  <input type="text" class="form-control" v-model="newUrL">
</div>
</script>

<script>
Vue.component('photo', {
  props: ['imgUrl'],
  template: '#photoComponent',
  data: function() {
   return {
	newUrL: this.imgUrl
   };
  }
})
</script>

3. 物件延遲載入

假設user這個物件的值會延遲載入，可以使用v-if 來判斷物件內的屬性是否有資料，

有資料在開始產生car這個template

<card :user-data="user" v-if="user.phone"></card>

4. keep-alive

template 維持狀態 keep-alive 使用keep-alive 讓 template 不被destory

<div class="row">
 <div class="col-sm-4">
  <keep-alive>
   <keep-card v-if="isShow">
   </keep-card>
  </keep-alive>
 </div>
</div>

5.props 設定型別

<div id="app">
 <h2>Props 的型別</h2>
 <prop-type :cash="cash"></prop-type>

 <h2 class="mt-3">靜態與動態傳入數值差異</h2>
 <!-- 有設定type的話，靜態傳入參數就會錯誤，要改為動態傳入參數 --> 
 <!-- :cash 有冒號，是動態傳入參數，沒有冒號是靜態傳入參數 --> 
 <prop-type :cash="300"></prop-type>
</div>

<script type="text/x-template" id="propType">
 <div>
  <input type="number" class="form-control" v-model="newCash"> {{ typeof(cash)}}
 </div>
</script>

<script>
Vue.component('prop-type', {
  //props: ['cash'],
  //改為以下的寫法，props改設定為物件
  //物件內可設定變數的屬性以及預設值
  //有設定型態的好處就是傳入字串的時候就會出現錯誤
  props: {
	cash: {
		type: Number,
		default: 100
	}
  },
  template: '#propType',
  data: function() {
	return {
		newCash: this.cash
	}
  }
});

var app = new Vue({
	el: '#app',
	data: {
		cash: 300
	}
});
</script>

6.傳入template的物件是傳參考進去，如果要更改template內的物件內容，且不影響外部的資料

<script>
Vue.component('card', 
{
 props: ['userData'],
 template: '#card',
 data: function() {
  // 如果不想影響外部的物件資料
  // 重新宣告一個新的物件，這樣template內部針對物件的內容作變更的時候
  // 就不會影響到外部的物件
  let newUser = Object.assign({}, this.userData);
  return {
	user: newUser
  }
 }
});
</script>