1.props 基礎用法(靜態/動態傳遞資料進入template)
2.維持單向數據流
3.物件延遲載入
4. keep-alive
5.props 設定型別
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>