vue基础——数据共享

​

组件间的数据共享方式较为常用的有父子关系，以及兄弟关系

①父组件向子组件传输数据：需要属于自定义属性

首先在子组件中通过props定义一个自定义的属性，然后在父组件中引用，如下面代码：

//父组件
<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']

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

//子组件
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
}

}

在子组件中自定义numchange事件，然后在父组件中使用

③兄弟组件之间的数据共享：使用的方案是EventBus

要发送数据发组件：

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()

接收数据的组件：

import bus from './eventBus.js'
export default {
data() {
return {
msgFromLeft: ''
}
},
created() {
bus.$on('share', val => {
this.msgFromLeft = val
})
}
}

主要步骤：首先创建eventBus.js模板，并向外共享一个Vue的实例对象，然后在数据发送方，调用bus.$emit("事件名称"，要发送的数据方法触发自定义事件)，最后在数据接收方，调用bus.$on("事件明称"，事件处理函数方法注册一个自定义事件)

​