Components 參數 ~ props

模組，就像 Function 一樣可以共用

總不能每個都一模一樣呀，因此

是獨立的
可以傳參數

傳參數，

就像前面提到的，既然是 html tag，傳參數當然就是用「屬性」 attribute 囉

為了要符合 html 與 JavaScript 和 Vue

傳送與接收語法很自然的就會像下面這樣的設計

// App.vue
<food-item food-name='Apples'/>
<food-item food-name='Pizza'/>

// FoodItem.vue
export default {
    props:[
        'foodName'
    ],
    data() {
    }
};

既然要傳參數，就會想到下面這些基本的需求

要怎麼傳「變數」？
如何訂「規格」、如何驗證？
必填？
有沒有「預設值」？
...

這些，下面都會一一說明。

重點

1.

傳變數 ~ v-bind
要怎麼傳呢？

既然是 html tag，一樣只能用「屬性」Attribute 囉

只是 ... 這樣傳進去的都是 string

如果想傳 boolean 呢？

還記得 Vue 裡面用屬性帶變數的語法嗎？

沒錯，可以用 v-bind！

例如：

v-bind:is-favorite="true"

這時候就會在 Vue 的 JS scope 中，

多了一個變數 isFavorite = true
2.
用 Objec 訂規格 ~ 變數的型別一定要明確！
Script 最令人詬病的就是型別很隨性，

不小心就會埋了很多地雷 ...

所以「強型別」

是 writing solid code 必要的條件！

參數怎麼宣告型別呢？

典型的技巧就是用「Object」當參數

要怎麼做到「變數 + 型別」，

因為是 JS，當然就是 Json 呀

變數 +型別，

就只能用「屬性 + 值」來表示囉

<script> export default { // props: ['foodName','foodDesc','isFavorite'] props: { foodName: String, foodDesc: String, isFavorite: Boolean } } </script>

萬一型別不符，

就可以在 console 看到 warning 警告

特別注意：

寫程式一定要連一個 warning 都不能出現！

物以惡小而為之，不然千里之堤最終可能會潰於蟻穴
3.
Requried Props
這簡單，類似 type 一樣，依樣畫葫蘆就對了

required: true

<script> export default { // props: ['foodName','foodDesc','isFavorite'] props: { foodName: { type: String, required: true }, foodDesc: String, isFavorite: Boolean } } </script>

宣告為「必傳」但又不傳參數呢？

一樣打開 console 就看得到警告囉 (如下圖)

再次強調，

寫程式時，一定要做到「沒有任何 warning！」

不然任何好的 debug 工具都沒用。

沒有 Warning 怎麼可能？

就只有幾個小 Warning 有這麼嚴重嗎？

做到沒有 Warning，就只是一個習慣而已喔。

如果不在乎，接下來很快就會失控 ...

有聽過「破窗效益」嗎？

一開始只有一個窗戶破掉不處理，接下來其他窗戶也會跟著破掉 ...

最後就變廢墟了。
4.
Default Value
怎麼指定預設值呢？

在 Json 的結構下，也只能像「required」一樣，加一個

default: "This is a default value."

簡單又明確！

明確，

是寫好程式 (可維護) 超級關鍵的能力喔！！
5.
Validator function
除了型別之外，

變數的還要符合規範！

例如，年紀要介於 0~120 之間才合理

要怎麼檢查呢？

一個一個檢查，那是石器時代 C 語言的做法，

現代當然要 elegant 一些囉

在 json 的結構下，當然就是

增加一個 validator 屬性囉
然後 return true 或 false

語法如下：

validator: function(value) {

if () {

reuturn true;

}

else {

return false;

}

}

如果傳的餐數值不合規範呢？

就 return false 呀
一樣打開 console 會看到 warning

婆婆媽媽再嘮叨一次

寫程式時，一定要做到「沒有任何 warning！」

因為這太重要了！

不然任何好的 debug 工具都沒用。

--

下面是 w3schools 的例子

字元數要介於 20 和 50 之間

(https://www.w3schools.com/vue/vue_props.php)

foodDesc: { type: String, required: false, default: 'This is the default description.', validator: function(value) { if( 20<value.length && value.length<50 ) { return true; } else { return false; } } },
6.
傳進來的參數，不能修改？？
Vue 的確如此，這很特別對吧！

如果要修改呢？

Vue 就是不行，沒得商量的。

那就只能「變通」，

用一個新的變數取代原來的參數

在新的變數修改，假裝好像可以修改啦。

以下是 W3school 的例子，

強烈建議不要這樣設計，因為用一樣的變數名稱，不知不覺中就搞混了

換個變數名稱會比較好。

data() { return { foodIsFavorite: this.isFavorite } }, methods: { toggleFavorite() { this.foodIsFavorite = !this.foodIsFavorite; } }