元件們如何傳遞資料?

Props與Emit的用法很常見，可在常使用在元件裡傳遞資料

• props 傳data到元件
• emit 從元件傳出data

如此確保每個元件都是獨立在相對隔離的環境中運作，可以大幅提高元件的維護性。

Props

用於要將資料從父層元件傳到子層元件時。
建議將傳進來的資料，定義資料型態、預設值，在接收props的資料後就會做更新。

props命名變數方式為kebab-case，全部都使用英文小寫，有分格的話用dash(-)隔開
在HTML裡無法解析camelCase，只能在template(板模)裡使用。

<div id="app">
    <component :add-text="message"></component>
</div>

let app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  }
})

<template>
	<input type="text" v-model="addText">
</template>

<script>
export default {
    props:{
        addText:{
            type: String,
            default: 'just default value'
        }
    }
}
</script>

將message透過自定義屬性[add-text] props到元件中，並將message的值用v-model做雙向綁定，讓文字框顯示Hello World!

如果想要直接改變props值會有錯誤，因為props的值在Vue定義為全域變數，需在元件中建立新變數替換props值。

Emit

從子元件傳遞資料給父元件時，就需要使用emit這個屬性。

<div id="app">
	<input type="button" id="send" @click="$emit('send-text', 'Hello World!')">
</div>

<component @send-text="showText"></component>

let app = new Vue({
    el: '#app',
    data: {},
	methods:{
        showText(val){
            alert('傳過來的資料' + val)
        }
    }
})

當點擊按鈕後，send-text事件將資料傳到外層，從元件傳出的事件，執行showText()，用傳過來的參數顯示提示訊息。

下一篇即將登場 - slot

Resource
Vue Component(元件) props、emit介紹

簡單的props和emit使用範例