組件間傳遞信息

父組件到子組件通訊
1 prop
父子組件
父子通訊中最常見的數據傳遞方式就是通過props傳遞數據，就好像方法的傳參一樣，父組件調用子組件並傳入數據，子組件接受到父組件傳遞的數據進行驗證使用

props 可以是數組或對象，用於接收來自父組件的數據。props 可以是簡單的數組，或者使用對象作爲替代，對象允許配置高級選項，如類型檢測、自定義校驗和設置默認值

<!-- 父組件 -->
<template>
    <div>
        <my-child :parentMessage="parentMessage"></my-child>
    </div>
</template>

<script>
    import MyChild from '@components/common/MyChild'

    export default {
        components: {
            MyChild
        },
        data() {
            return {
                parentMessage: "我是來自父組件的消息"
            }
        }
    }
</script>

<!-- 子組件 -->
<template>
    <div>
        <span>{{ parentMessage }}</span>
    </div>
</template>

<script>
    export default {
        props: {
            parentMessage: {
                type: String,
                default: '默認顯示的信息'
                // require: true // 必填
            }
        }
    }
</script>

2
獲取父組件然後使用父組件中的數據（不推薦）
準確來說這種方式並不屬於數據的傳遞而是一種主動的查找。父組件並沒有主動的傳遞數據給子組件，而是子組件通過與父組件的關聯關係，獲取了父組件的數據。
該方法雖然能實現獲取父組件中的數據但是不推薦這種方式，因爲vue提倡單向數據流，只有父組件交給子組件的數據子組件纔有使用的權限，不允許子組件私自獲取父組件的數據進行使用。在父與子的關係中子應當是處於一種被動關係

// 此處的this爲子組件實例
this.$parent

子組件到父組件通訊
子組件到父組件的通訊主要爲父組件如何接受子組件之中的數據。這裏的數據包括屬性和方法（String, Number, Boolean, Object, Array, Function）
3 自定義組件
專門針對父子組件（爺孫的不合適）。

<!-- 父組件 -->
<template>
    <div>
        <my-child @childEvent="parentMethod"></my-child>
    </div>
</template>

<script>
    import MyChild from '@components/common/MyChild'

    export default {
        components: {
            MyChild
        },
        data() {
            return {
                parentMessage: '我是來自父組件的消息'
            }
        },
        methods: {
            parentMethod({ name, age }) {
                console.log(this.parentMessage, name, age)
            }
        }
    }
</script>

<!-- 子組件 -->
<template>
    <div>
        <h3>子組件</h3>
    </div>
</template>

<script>
    export default {
        mounted() {
            this.$emit('childEvent', { name: 'zhangsan', age:  10 })
        }
    }
</script>

4
refs 獲取
可以通過在子組件添加ref屬性，然後可以通過ref屬性名稱獲取到子組件的實例。準確來說這種方式和 this.$parent 一樣並不屬於數據的傳遞而是一種主動的查找。

儘量避免使用這種方式。因爲在父子組件通信的過程中。父組件是處於高位是擁有控制權，而子組件在多數情況下應該爲純視圖組件，只負責視圖的展示和自身視圖的邏輯操作。對外交互的權利應該由父組件來控制。所以應當由父組件傳遞視圖數據給子組件，子組件負責展示。而子組件的對外交互通過$emit觸發父組件中相應的方法，再由父組件處理相應邏輯

<!-- 父組件 -->
<template>
    <div>
        <my-child ref="child"></my-child>
    </div>
</template>

<script>
    import MyChild from '@components/common/MyChild'

    export default {
        components: {
            MyChild
        },
        mounted() {
            console.log(this.$refs['child'].getData());
            console.log(this.$refs['child'].childata)
        }
    }
</script>

<!-- 子組件 -->
<script>
    export default {
    	data(){
    		return:{
			   childata:0,
			}
    	},
        methods: {
            getData() {
                // do something...
            }
        }
    }
</script>