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