vue组件之间的数据共享

vue组件数据共享

1.父传子

父组件向子组件共享数据需要子组件自定义props属性来接收

props是组件的自定义属性，在封装通用组件的时候，合理地使用props可以极大提高组件的复用性

• props中的数据可以直接在模板中使用
• props中的数据是只读的，修改会报错,但是可以在data中重新赋值然后修改
• props默认值的设置(可以设置一个初始值，如果父组件没有传值的话就会使用默认值)
• props的type值类型（string、number、boolean、obj…）
• props的required属性（要求父组件必须有初始值，不然会报错）

父组件

• 在子组件标签上绑定要传递的数据

<template>
	<MyRight :msg="message" :user="userinfo"></MyRight>
</template>
export default {
  data(){
    return{
      message:'我是父组件',
      userinfo:{
        name:'yxj',
        age:16
      }
    }
  }
}

子组件

设置props接收父组件的数据

• 数组类型的props

<template>
	  <p>{{message}}</p>
      <p> {{name}}</p>
  </div>
</template>
export default {
  props:['msg','user'],
  data(){
    return{
     //也可以不赋值，直接使用
     message:this.msg,
     name:this.user.name,
    }
  }
}

• 对象类型的props

  props:{
    msg:{
      //设置默认值
      default:'xxx',
      // 指定类型
      type:String,
      // 指定父组件必须传值
      required:true,
    },
    user:{
      type:Object,
    }
  },

2.子传父

• 子组件向父组件共享数据需要在子组件的事件调用函数里自定义事件$emit(‘事件名’,‘需要共享的数据’);
• 父组件在子组件的标签上通过自定义的事件名调用函数得到数据
• 自定义的事件调用函数的形参就是子组件传递过来的数据

子组件

<template>
  <div class="wrap">
      <h3>right 子组件{{count}}</h3>
      <button @click="add"> + 1 </button>
  </div>
</template>
export default {
  data(){
    return{
      count:0,
    }
  },
  methods:{
    add(){
      this.count+=1;
      //自定义一个事件，让父组件通过该事件得到数据
      this.$emit('numchange',this.count)
    },
  }
}

父组件

<template>
	<MyRight @numchange="getNum"></MyRight>
  </div>
</template>
export default {
  data(){
    return{
      count:0,
    }
  },
  methods:{
    //通过调用自定义事件函数得到子组件的数据
    getNum(val){
      this.count = val;
    },
  }
}

3.兄弟组件数据共享

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

• 定义一个共享的vue实例对象eventBus.js

import Vue from "vue";
export default new Vue()

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

<template>
<div class="fa">
  <div class="wrap">
      <h1>left 发送数据</h1> 
  </div>
  <button @click="send">点击发送数据给我的Right兄弟</button>
</div>
</template>
<script>
import bus from'./eventBus'
export default {
  data(){
    return{
      str:`left 发送的数据`,
    }
  },
  methods:{
    send(){
      // 通过eventBus发送数据
      bus.$emit('share',this.str);
    }
  }
}
</script>

• 在数据的接收方调用bus.$on(‘事件名称’,事件处理函数)注册一个自定义事件

<template>
<div class="fa">
  <div class="wrap">
    <h1>Right 接收数据</h1>
    <h1>{{msgFromLeft}}</h1>
  </div>
</div>
</template>
<script>
import bus from'./eventBus'
export default {
  data(){
    return{
      msgFromLeft:''
    }
  },
  created(){
    // 为bus绑定自定义事件
    bus.$on('share',(val)=>{
      this.msgFromLeft = val;
    })
  }
}
</script>

总结

• 父组件向子组件传递数据时，父组件通过v-bind把数据绑定给子组件；子组件通过自定义props属性来接收数据。

• 子组件向父组件传递数据时，子组件调用this.$emit()方法触发自定义事件，$emit()第一个参数为自定义事件名称，第二个参数为要发给父组件的数据；父组件通过v-on:绑定自定义事件，在事件处理函数的形参接收子组件传递过来的数据。

• 兄弟组件之间数据共享需要定义一个共享的vue实例对象eventBus.js，并向外导出vue对象。发送方引入该实例对象并调用bus.$emit(‘要触发的事件名’,‘要发送的数据’)方法。接收方同样需要引入公共的实例对象，一般在created生命周期函数中调用bus.$on(‘发送方定义的事件名’,‘事件处理函数’)，通过函数的形参接收数据。