Vue2.0 心法 ==> 第二層：組件通信

像指令這些東西比較簡單，暫時沒發現什麼坑，就先不表，以後遇見坑了再加上。下面直接說組件之間的通信。

一、父組件傳值到子組件

• 1 . props 傳值

父組件

<template>
    <div class="routers">
        <baidu-map father-msg="this is a string"></baidu-map> <!--字符串傳值-->
        <baidu-map :father-msg="data"></baidu-map> <!--變量傳值-->
    </div>
</template>
<script>
    import baiduMap from './baidu'
    export default {
        data () {
            return {
                data: 'this is a string',
                //data可以是字符串，對象，數組
            }
        },
</script>

子組件

<template>
    <div id="baiduMap" class="baiduMap"></div>
</template>
<script>
    export default {
        // 聲明屬性
        props: {
            fatherMsg : [String, Object, Array] // 可以是字符串 對象 數組
        },
        data () {
            return {

            }
        },
</script>

• 2 . 插槽 slot 傳值

引用慕課網上fishenal老師的例子。
父組件

<template>
    <div class="routers">
        <baidu-map father-msg="this is a string">
             <p slot="header">這是header的內容</p>
             <p slot="footer">這是footer的內容</p>
        </baidu-map>
    </div>
</template>
<script>
    import baiduMap from './baidu'
    export default {
        data () {
            return {

            }
        },
</script>

子組件

<template>
    <slot name="header">no header</slot>
    <p>這是中間的內容</p>
    <slot name="footer">no footer</slot>
</template>
<script>
    export default {
        data () {
            return {

            }
        },
</script>

• 3 . 事件傳遞
  有時候我們需要在 當父組件事件觸發時，子組件才進行響應。需要用到事件廣播。

父組件

<template>
    <div class="routers">
        <!-- 使用ref屬性註冊子組件的引用信息 -->
        <baidu-map ref="baiduMapComp"></baidu-map>
        <button @click='fatherClick'>父組件中的點擊</button>
    </div>
</template>
<script>
    import baiduMap from './baidu'
    export default {
        data () {
            return {
               info: 'this is message from father'
            }
        },
        methods: {
            fatherClick () {
                // 向baiduMapComp中的getEquip函數中傳遞info
                this.$refs.baiduMapComp.getInfo(this.info);
            }
        }
</script>

子組件

<template>
    <div id="baiduMap" class="baiduMap"></div>
</template>
<script>
    export default {
        data () {
            return {

            }
        },
        methods: {
            getInfo (data) { // 父組件每次點擊按鈕，都會觸發次函數
                console.log(data);
            }
        }
</script>

二、子組件傳值到父組件

• $emit

父組件

<template>
    <div class="routers">
            <!-- 自定義事件接收值 -->
            <baidu-map @getMsg = 'fatherGetMsg'></baidu-map>
        </div>
    </div>
</template>
<script>
    import baiduMap from './baidu'
    export default {
        data () {
            return {

            }
        },
        methods: {
            fatherGetMsg (data) {
                console.log(data)
            }
        }
</script>

子組件

<template>
    <div id="baiduMap" class="baiduMap">
        <button @click = 'emitToFather'>發送到父組件</button>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                data: 'this is message from son'
            }
        },
        methods: {
            emitToFather () {
                this.$emit('getMsg', this.data);
            }
        }
</script>

三、非父子關係組件間傳值

使用一個空的 Vue 實例作爲事件總線：

var bus = new Vue()
// 觸發組件 A 中的事件
bus.$emit('id-selected', 1)
// 在組件 B 創建的鉤子中監聽事件
bus.$on('id-selected', function (id) {
  // ...
})