# [Vue.js] 元件使用說明：props、emit

###### tags: `Vue.js`

前面常被提及的props語法其實就是元件的寫法，只是將原本在底下新增的元件移置到新的vue頁面上，原本的執行方式是在html裡頭加上`<name></name>`的元件，就能顯示出新vue上的功能，而要顯示此功能就需要進行串接的動作，在新的vue元件裡，需要先命名一變數，當主頁面或其他頁面要使用此元件時，只需要完成變數間串接便可使用，

#### Props的用法
前提是因為元件屬於內層，vue的主頁面是外層，當要從外層傳入內層需要使用Props語法，將元件裡的變數載入，再到html裡做指定的更換，才能將外層的元素(data內資料)載入到元件內，完成串接
props: ['pageProps'],

主頁面串接範例如下：
`<Pagination :pageprops="pagination" ></Pagination>`
> *pagination是data裡的變數
>
總結：在元件內層裡的公式都需要一個變數x，而在主頁面裡取用需要執行的變數A，將此變數名稱A替換變數x的位置(串接完成)，A變數就會到元件內層進行功能渲染，將渲染的成果在主頁面裡自動呈現，以完成的元件的使用。

#### emit的用法
此用法則是內層去觸發外層的函式，例如在點擊時會使用到，當我們在內層進行元件的編寫時，不僅只使用v-model概念的變數props串接，也會有觸發事件產生(大部分)，因此會使用emit去觸發外層頁面的methods函式內容。

//在內層元件的內容

methods: {
    pageEmit(page) {
      this.$emit("pagenum_emit", page);
    } }

內層元件裡的函式名稱為pageEmit()，代一個參數為page頁數，內容寫入emit傳到外層的名稱pagenum_emit，重點是page的參數，也能傳至外層的函式供使用

//外層函式內容

<Pagination @pagenum_emit="getProducts"></Pagination>`

methods:{
    getProducts(page){
        return 我在第 page 頁
    }
}

> *注意在html裡要有大小駝峰的用法，建議使用get_products

外層函式使用＠pagenum_emit當作接應的暗號，在觸發自身methods裡的getProducts函式，並代入參數執行下一步動作。

### 使用 props.async修飾符（同步父子組件之間的傳值）

使用時機：當父層與子層都要綁定相同的props值(命名：Ａ)，在觸發事件時都會相互改變A的值，這時我們就可以用async同步修改

原本項目

<childcomponent> 
    v-bind=”counter” 
    v-on:update:counter=”counter = $event”
</childcomponent>

改變項目
1. 無需寫上v-on觸發事件
2. 將子元件的函式emit部分原本是寫入綁定的函式名稱，只要更改為 update:名稱(props相同名)
3. 父層的methods內容可刪除

參考：https://medium.com/%E4%B8%80%E5%80%8B%E5%B0%8F%E5%B0%8F%E5%B7%A5%E7%A8%8B%E5%B8%AB%E7%9A%84%E9%9A%A8%E6%89%8B%E7%AD%86%E8%A8%98/vue-%E4%BD%BF%E7%94%A8-props-async-%E5%90%8C%E6%AD%A5%E7%88%B6%E5%AD%90%E7%B5%84%E5%BB%BA%E4%B9%8B%E9%96%93%E7%9A%84%E5%82%B3%E5%80%BC-f7b1d3007836

總結：這麼說好了，有兩個元件彼此需要有相同的data值，當父改變子也要一同改變，想當然會改變就是有一個公式，點擊後就會轉變，這裡用+1當作公式，子元件掌管此公式，及帶入的參數，參數內容就是公式，將本來的值加上1，需要做的事就是在emit本來命名的名稱改為跟props值相同的名稱，這麼一來，第一：在子層props的值，與父層的變數連結，第二：async會自動往子層去找updata的公式，觸發後就會一起改變