Vue_ 解析Props、 emit

vue 組件，會使用 props 來接受上層傳來的資料。props 是一個陣列，裡面包含多個字串。
將原本在底下新增的元件移置到新的vue頁面上，原本的執行方式是在html裡頭加上的元件，就能顯示出新vue上的功能，而要顯示此功能就需要進行串接的動作，在新的vue元件裡，需要先命名一變數，當主頁面或其他頁面要使用此元件時，只需要完成變數間串接便可使用

Props用法

命名上，假設在 component 中的 props 使用 camelCase、Pascalcase，在 html 模板中引用時，一律使用 kebab-case ，因為會需要先經過瀏覽器解析。

前提是因為元件屬於內層，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);
    } }

在元件內層同樣要在script寫上methods，並需要一個變數y，以上面的例子來看y等同於pageEmit代參數，執行emit語法再更換一組變數z，此變數z就會到主頁面去跟需觸發的事件做串接(更換對應的變數名稱)

主頁面串接如下：

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

*getProducts是函式名稱
*注意在html裡要有大小駝峰的用法，建議使用get_products