vue组件之间的数据共享

1.组件之间的关系 

在项目开发中，组件之间的最常见的关系分为如下两种:

① 父子关系

② 兄弟关系

1.父向子传值---使用自定义属性

父组件向子组件共享数据需要使用自定义属性。示例代码如下:

父组件：

<Son :msg="message" :user="userinfo"></Son>

data() { 
    return {
        message: 'hello vue.js' ，
        userinfo: { name:'zs', age: 20 }
    }
}

子组件：

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

props: [ 'msg', 'user']

注意:不要修改props里的值。

2.子组件向父组件共享数据

子组件向父组件共享数据使用自定义事件。示例代码如下:

子组件：

export default {
    data() {
        return { count: 0 }
    },
    methods: {
        add() {
            this.count += 1
            //修改数据时，通过 $emit() 触发自定义事件
            this.$emit('numchange', this.count)
        }
    }
}

父组件：

<Son @numchange="getNewCount"></Son>
export default {
    data() {
        return { countFromSon: 0 }
    },
    methods: {
        getNewCount(val) {
            this.countFromSon = val
        }
    }
}

 3.兄弟组件之间的数据共享

在 vue2.x 中，兄弟组件之间数据共享的方案是 EventBus。

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

import bus from './eventBus.js'

export default {
    data(){
        return{
            msg:'hello vue.js'
        }
    },
    methods:{
        sendMsg(){
            // 专门来发送数据的，一般是把本文件数据发到另一个文件使用
            bus.$emit('share', this.msg)
        }
    }
}

eventBus.js:

import Vue from 'vue'

//向外共享Vue的实例对象
export default new Vue()

兄弟组件C (数据接收方):

import bus from './eventBus.js'
export default {
    data() {
        return {
            msgFromLeft: ''
        }
    },
    created() {
        // $on事件是专门接收数据的
        bus.$on('share'，val => {
            this.msgFromLeft = val
        })
    }
}

EventBus的使用步骤

① 创建 eventBus.js 模块,并向外共享一个 Vue 的实例对象

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

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