關於Vue.js的元件化,使用props傳遞資料
元件化是Vue.js的重要組成部分。對於一個工程量很大的專案,元件化是重中之重。
剛剛入手Vue,感覺Vue的元件化非常棒。
主要是記錄下自己學的過程中遇到的問題與解決。
構成元件:
元件意味著協同工作,通常父子元件會是這樣的關係:元件 A 在它的模版中使用了元件 B 。它們之間必然需要相互通訊:父元件要給子元件傳遞資料,子元件需要將它內部發生的事情告知給父元件。然而,在一個良好定義的介面中儘可能將父子元件解耦是很重要的。這保證了每個元件可以在相對隔離的環境中書寫和理解,也大幅提高了元件的可維護性和可重用性。
在 Vue.js 中,父子元件的關係可以總結為 props down, events up
這是官方文件的教程。
下面舉具體的例子。
用props傳遞資料。
首先你要先建立一個自定義標籤。
Vue.component('child5', {
// 宣告 props
props: ['message'],
// 就像 data 一樣,prop 可以用在模板內
// 同樣也可以在 vm 例項中像 “this.message” 這樣使用
template: '<span>{{ message }}</span>'
})
我建立了一個child5的標籤。
props用來傳遞資料。
template作為一個模板。結果是span標籤會替代child5標籤。
然後new一個Vue出來。
new Vue({
el:"#app-992",
data:{
message:"haha"
}
})
下面貼到html程式碼。
<div id="app-992">
<input v-model="message">
<br>
<child5 :message="message"></child5>
</div>
可以看到用v-model與child5標籤建立關係。:message是v-bind:message的縮寫。
如果看過Vue的同學應該知道。
<input v-model="message">
<child5 :message="message"></child5>
裡面的”message“是互相繫結的,也就是說只要他倆一樣就行,無所謂你取什麼名字,而這兩個message指的是new出來的Vue裡的message也就是message:“haha”。
可能大家有點暈。我們可以給他解耦一下。假如沒有child5這個標籤,假如只是一個普通的p標籤:
<div id="app-998">
<textarea v-model="message" placeholder="點選我"></textarea>
<p style="white-space: pre">message is:{{message}}</p>
</div>
new Vue({
el:"#app-998",
data:{
message:""
}
})
結構非常清晰,你在textarea裡輸入什麼,下面的p標籤就會顯示什麼。同理,這個message取什麼名字,對應的是如上所說的地方。然後就是我們自定義的標籤child5,props用來傳遞資料,傳遞給
<span>{{ message }}</span>'
所以props裡面的message就是這個message,而這個message在html裡就是child5裡面:message這個了。這個相當於一個小元件,把他整合到div裡。其實他與div沒半毛錢關係。你可以想象把一個輪播圖放到一個div裡面。然後唯一有關係的是資料的傳遞,你結合這句程式碼:
<child5 :message="message"></child5>
你定義的標籤的message的值 是“message”,“message”的值 就是你自己new出來的 Vue裡面那個message的值,這樣就聯絡起來了。
自己瞎寫瞎總結的,望各位看官手下留情,歡迎批評指正!