---
# System prepended metadata

title: 為什麼組件(Compoment)中宣告的 Property 沒有包含「-」連接字，在 v-bind 的時候綁定的 Property 卻要包含「-」連接呢 ?
tags: [學習 Vue]

---

# 為什麼組件(Compoment)中宣告的 Property 沒有包含「-」連接字，在 v-bind 的時候綁定的 Property 卻要包含「-」連接呢 ?
###### tags: `學習 Vue`

## 在某個組件中宣告了欄位 -> positiveButtonClickEvent
```
props: {
    // on positive button click
    positiveButtonClickEvent: Function,
}, 
```

## 在使用組件的時候綁定欄位為什麼就要加上「-」呢？
![](https://i.imgur.com/bDw0K5H.png)

### 這是 Vue 進行的轉換
你如果寫 
```
positiveButtonClickEvent
```
但是其實在前端 Html 眼裡看到的是
```
positivebuttonclickevent
```
所以 Vue 在這一部份，將需要大寫的字元前面加上「-」以進行辨別

## 特別要注意
只有這種 JS 宣告的 Property 有此問題，如果是雙引號中的字串不會有這種問題
但是為了統一寫法，還是會比照針對 Property 的寫法加上「-」
![](https://i.imgur.com/38mTef1.png)

