Landy Blog
0%

Alex宅幹嘛ReVue-Day11.客製化元件的props用法

發表於 分類於
Alex宅幹嘛ReVue-Day11 紀錄在客製化的元件中，有哪些 props 和 v-mdeol 的功能可以使用

Vue事件命名的雷

在 Vue 中，事件的名稱並不會像元件一樣被自動轉換成 kebab-case 的撰寫方式，也就是你的 event 是怎麼命名的那你在偵聽該事件的時候，就必須以它的撰寫方式做偵聽。
ex:

1
2
3
4
5
---HTML---
<my-component v-on:my-event="doSomething"></my-component>   // 以 kebab-case 的方式在 HTML文本中加入我們的偵聽事件

---JavaScript---
this.$emit('myEvent')  // 以 camelCase 的方式定義 event 名稱

以上這個範例展示了一個窘境，首先，在 html 文本中，它是沒有大小寫之分的，所以，你要將你那些用 camelCase 撰寫方式的內容都轉成 kebab-case 的撰寫方式。
但是，你定義的事件必須定義的時候和使用的時候大寫寫要一致，不能改變，這就和 HTML 文本的限制產生衝突的。
所以，還是建議你在 event 名稱定義上還是用 kebab-case 的方式來定義會比較好，就可以彌平上面這種窘境了。

客製化元件的 v-model

在 Vue 官方文件中 ，有說明要怎麼客製化我們自製的元件的 v-model。
客製化 v-model 的內容，主要是教我們怎麼指定 v-model 去監聽客製化元件的哪一個資料，並在該資料完成變動後，去觸發我們指定的事件。 完成一個客製化的雙向綁定的功能。

上面的範例，我們用 v-model 去同步外部資料 test。 並指定是由元件的 active 這個 props 屬性去將 test 的資料接進來，接著，再指定由 component-event 事件將更動後的結果傳出去，
接著，test 的內容就會被 $emit 所傳出的內容所更動。
那除了可以指定我們自訂義的事件之外，也可以指定到預設事件喔，像是 change 事件之類的。
你可以看到以上這個範例，我們甚至不需要在 HTML 文本中元件的標籤上寫入要綁定的事件，只要寫上 v-model，就可以自動的觸發到我們指定的事件，並更動到外部的 test 的內容囉。
很省 code 很好用，Alex 建議使用XDD
但是，在 Vue 2 版本中的這種 v-model 客製化自己的雙向綁定只能綁定一個對象喔，若你有多個對象的話，就要用傳統的方式來做傳輸了。

.sync 修飾詞

當你有多個 props 綁定的時候，且你希望這些 props 都具有雙向綁定的特性的話，我們就可以利用 sync 前綴詞，來達到這種效果。
另外，官方建議使用 update:[屬性名] 的事件方式來呼叫父組件更新屬性。
跟 v-model 的功用一樣，只不過 v-model 只能綁定一個 prop 而已。

以上這個範例可以看到我們在 Vue元件中的兩個 props 屬性上，分別都加上了sync 修飾符，當我們點擊該元件時，會觸發 clickHandler 裡面這兩個 props 連動的 event。
並發出我們想要修改的值，去更改原本資料元的內容。
可以看到我們用這種方法可以把 code 的行數減少，因為，不需要再像以前的那種還要在資料源的 Vue 物件中，再新增相對應的事件後，再將我們傳入的值，去修改原本資料元的內容。
sync 可以幫我們不用再寫這部分的 code 了。

.sync 綁定內容限定

在 Vue 的官方文件中，有特別說到在 sync 綁定的內容只能寫入綁定目標的屬性名稱，不能再對綁定內容做任何合併，不然， Vue 會不知道被綁定的目標是誰。
ex:

1
v-bind:title.sync="doc.title + '!'"  // 這樣就是不行的，只能放入 doc.title 這個屬性名稱

v-bind.sync 綁定物件

我們也可以直接用 .sync 來綁定一個外界的物件，那在綁定之後，Vue 會自動為這個元件新增相對應這綁定物件的各個屬性。
也就是說，如果被綁定的這個物件是 obj 然後，它擁有兩個成員屬性分別是 title 和 description ，此時，你用 v-bind.sync 來綁定這個物件， Vue 會自動為你這個元件新增 title 和 description 這兩個 props 屬性，很神奇吧~~

上面這個範例，你可以看到我們直接使用 v-bind.sync 將外部物件 content 引進來，並在觸發的 methods 中，去修改 Vue 幫我們新增的相對應物件 content 屬性的兩個 props 屬性 title 和 description 的內容。
很方便吧~

Alex宅幹嘛-眉眉角角

變數命名的寫法

  1. camelCase
  2. PascalCase
  3. kebab-case
  4. snake_case
    以上這四種寫法，就是我們在命名變數的時候，有可能會用到的撰寫 style。

不要用元件修改外部資料

Alex 常在影片中提到，盡量不要在元件內部，直接的去修改外部傳入的資料，這會導致未來很難管理資料。