前面建立 x-template 有提到如何使用 props 的情境，props 是將全域元件的資料傳到局部元件的管道，設定 props 的地方，為局部元件，可以當作是承裝資料的窗口。
使用情境
現在痊癒中有一個圖片的連結資料，要將這個連結資料透過 props 的方式傳遞到局部元件。
全域資料的圖片連結
1
2
3
4
5
6
7
| 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",
},
});
|
要接收資料的 HTML 與局部元件
HTML
1
2
3
4
5
6
| <div id="app">
<h2>靜態傳遞</h2>
<photo></photo>
<h2>動態傳遞</h2>
<photo></photo>
</div>
|
Vue 局部元件
局部元件中已經建立好相關語法，可以看到已經動態綁定圖片資料名稱。
1
2
3
4
5
6
| <script type="text/x-template" id="photo">
<div>
<img :src="imgUrl" class="img-fluid" alt="" />
<p>風景照</p>
</div>
</script>
|
局部元件相關的物件設定，id 為 photo。
1
2
3
4
| Vue.component("photo", {
props: ["imgUrl"],
template: "#photo",
});
|
靜態傳遞
竟態傳遞的方法是這張圖片之後也不會再變動比較適用，在 photo 元件標籤上，加上 props 定義的陣列名稱，在 HTML 中，不可以用小駝峰式的方式建立變數名稱，要使用 dash - 這個符號來區隔在元件中的名稱。
以 imgUrl 為例，這個在程式碼中遇到不同單字的第一個字母，改為大寫的寫法稱為小駝峰式。
所以在 HTML 的變數要寫成 img-url，將這個變數名稱加在 src 中。
1
2
3
4
| <h2>靜態傳遞</h2>
<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>
|
這樣就完成了 props 的靜態傳遞。
動態傳遞
寫法跟靜態傳遞有點像，只是因為動態傳遞可以讓會變動的資料也能即時的接收到，所以要使用 v-bind 的綁定。
1
| <photo :img-url="url"></photo>
|
這樣就完成了 props 的傳遞。
DEMO
小結
props 的資料傳遞在 Vue 中相當重要，懶人記憶法為是哪一個元件成為子層要接收資料，就將 props 屬性放在該元件中。
完整程式碼：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <div id="app">
<h2>靜態傳遞</h2>
<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>
<photo :img-url="url"></photo>
</div>
<script type="text/x-template" id="photo">
<div>
<img :src="imgUrl" class="img-fluid" alt="" />
<p>風景照</p>
</div>
</script>
<script>
Vue.component("photo", {
props: ["imgUrl"],
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",
},
});
</script>
|