透過前幾天的介紹，我們可以知道 Vue 的畫面是由一個一個的 component 組成的，並且我們可以在 component 裡面設定屬於自己的行為、畫面以及數值，那麼有沒有可能我們可以在父元件將數值傳遞到子元件呢？
答案當然是可以，首先些哨哨我們的第一個重點 props

props

在沒有這麼多的邏輯需求前，當我們需要引用一個基本的元件我們可以這樣寫

<template>
    <div>
        <child-component></child-component>
    </div>
</template>
<script>
    import childComponent from '@/componsnts/childComponent';
    export default {
        components: {
            childComponent
        }
    }
</script>

但今天我們若是要將一個列表，或是一段文字傳進去我們可以這樣寫

<template>
    <div class="father_component">
        <child-component :myTitle="title"></child-component>
    </div>
</template>
<script>
    import childComponent from '@/componsnts/childComponent';
    export default {
        components: {
            childComponent
        },
        data(){
            return {
                title: 'hello'
            }
        }
    }
</script>

並且在子元件這樣使用

<template>
    <div class="child_component">{{props.myTitle}}</div>
</template>
<script>
export default {
    props: {
        myTitle: String
    }
}
</script>

當然，也許你不見得會想要為 props 裡面的內容設定型別，又或者是你想要將他列為必填，我們可以這樣使用

export default {
    props: {
        myTitle: {
            type: String,
            required: true
        },
        subTitle: null
    }
}

在這邊我們將 myTitle 設為必填，並且需要是字串，然而 subTitle 就不需要型別檢查並且在父元素不需要帶入了

在介紹完父元素對子元素的傳遞後，我們也可以透過子元素來通知父元素發生變動

emit

大致上的流程十分好理解，在元件上面安裝一個偵測事件，並且在元件內需要通知父元素的時候觸發此事件，並且將要給予對方的內容放上去，轉換成代碼就是：

<template>
    <div class="father_component">
        <child-component :myTitle="title" @updateTitle="changeTitle"></child-component>
    </div>
</template>
<script>
    import childComponent from '@/componsnts/childComponent';
    export default {
        components: {
            childComponent
        },
        data(){
            return {
                title: 'hello'
            }
        },
        methods: {
            changeTitle(childVal){
                this.title = childVal;
            }
        }
    }
</script>

並且在子元件內安插 emit 事件

export default {
    methods: {
        changeMyTitle(val){
            this.$emit('updateTitle', val);
        }
    }
}

這樣在子元素觸發 changeMyTitle 的事件後，就會將 updateTitle 此通知傳遞到父元件當中，並且父元件通過 v-on 事件可以觸發綁定的函式，做出需要做的事情

除了 props 以及 emit 以外，還有其他的跨元件傳遞變數的方法，像是 eventBus 或是 Vuex 之類的，但他們的管理成本相較於 porps 以及 emit 以外更高了，建議還是有需求再用，今天的內容就到此結束啦～讓我們明天見