Vue组件之间的数据共享

一.父向子传值（需要自定义属性）

        1.在父组件中使用v-bind 绑定属性

// 父组件
<Son :msg="message" :user="userinfo"></Son>

data(){
    return: {
        message:'123',
        userinfo: { name: 'zs', age: 20 }
    }
}

        2.在子组件中使用props定义属性

// 子组件
<template>
    <div>
        <h5>Son组件</h5>
        <p>父组件传递过来的 msg 值是: {{ msg }}</p>
        <p>父组件传递过来的 user 值是: {{ user }}</p>
    </div>
</template>

props: [ 'msg', 'user' ]

二.子向父传值（需要自定义事件）

        1.子组件中通过$emit()触发自定义事件

                this.$emit( '自定义事件'， 数据)

// 子组件
export default {
    data () {
        return {
            count: 0
        }
    },
    methods: {
        add () {
            this.count += 1 // add函数实现count值+1 的操作
            // 修改数据后，通过$emit()方法触发自定义事件
            this.$emit( 'numchange', this.count )
        }    
    }
}

        2.父组件通过自定义事件再绑定一个事件处理函数

// 父组件
// 给在子组件中使用的自定义事件绑定事件处理函数
<Son @numchange = 'getNewCount'></Son>

export default {
    data () {
        return {
            countFromSon: 0
        }
    },
    methods: {
        getNewCount (val) {
            // 接收传递过来的值
            this.countFromSon = val
        }
    }
}

三.兄弟组件之间的传值(EventBus) \

1.创建eventBus.js模块，并向外共享一个Vue实例对象

// eventBus.js 文件

import Vue from 'vue'

// 向外共享 Vue 的实例对象

export default new Vue() 

2.在数据发送方，调用 bus.$emit( '事件名称', 要发的数据)方法触发自定义事件

// 兄弟组件A（数据发送方）

// 引入 bus 
import bus from './eventBus.js'

export default {
    data () {
        return {
            msg: '123'
        }
    },
    methods: {
        // 调用该方法发送数据
        sendMsg () {
            bus.$emit( 'share', 'this.msg')
        }
    }
}

3.在数据接收方，调用bus.$on( '事件名称', '事件处理函数')方法注册一个自定义事件

// 兄弟组件B（数据接收方）

import bus from './eventBus.js'

export default {
    data () {
        return {
            msgFromBrother: ''
        }
    },
    created () {
        bus.$on( 'share', val => {
            this.msgFromBrother = val
        })
    }
}