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) {
  // ...
})