Vue学习之 --- 组件之间的共享数据

一 父向子传值

1.父组件向子组件共享数据需要使用自定义属性。

父组件

<template>
  <div id="app">
    <h1> App 根组件</h1>
    <hr>
    <div class="box"> 
      <son :msg="message" :user="userinfo"> </son>
    </div>
  </div>
</template>

<script>
import son from '@/components/son.vue'

export default {
  name: 'App',
  components: {
    son
  },
  data(){
    return {
      message:'hello world',
      userinfo:{name:'wsc',age:18}
    }
  }
}
</script>

子组件

<template>
    <div class="son-container">
        <h3> son 组件</h3>
        <p> msg = {{ msg }} </p>
        <p>user= {{ user}} </p>
    </div>
</template>

<script>
   export default{
      props:['msg','user']
   }
</script> 

二 子向父传值

子组件向父组件共享数据使用自定义事件。

子组件代码

<template>
    <div class="right-container">
        <h3>daughter组件 count = {{ count }}</h3>
        <button @click="add"> 加+1</button>
    </div>
</template>

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

父组件代码

<template>
  <div id="app">
    <h1> App 根组件 countFromdaughter ={{ countFromdaughter }}</h1>
    <hr>
    <div class="box"> 
      <son :msg="message" :user="userinfo"> </son>
      <daughter @Numchange="ChangeCount"> </daughter>
    </div>
  </div>
</template>
<script>
import son from '@/components/son.vue'
import daughter from '@/components/daughter.vue'
export default {
  name: 'App',
  components: {
    son,
    daughter
  },
  data(){
    return {
      message:'hello world',
      userinfo:{name:'wsc',age:18},
      countFromdaughter:0
    }
  },
  methods:{
    ChangeCount(val){//获取子附件传递的数据
      this.countFromdaughter = val;
    }
  }
}
</script>

三 兄弟组件之间的数据传递

在Vue2.x中，兄弟组件之间数据共享的方案是EventBus,步骤如下:

1.创建eventBus.js模块，并向外共享一个Vue的实例对象
2.在数据的发送放，调用bus.$ emit(‘事件名称’,要发送的数据)方法触发自定义事件。
3.在数据接收方，调用bus.$on(‘事件名称’,‘事件处理函数’)方法注册一个自定义事件

eventBus.js代码

import Vue from 'vue'

export default new Vue()

兄弟组件A

<script>
// 导入eventBus.js
import bus from '@/components/eventBus.js'
   export default{
      props:['msg','user'],
      data(){
         return {
            strmsg:'东风夜放花千树。更吹落、星如雨。宝马雕车香满路。凤箫声动，玉壶光转，一夜鱼龙舞。蛾儿雪柳黄金缕。笑语盈盈暗香去。众里寻他千百度。蓦然回首，那人却在，灯火阑珊处'
         }
      },
      methods:{
         Send(){// 通过eventBus发送数据
            bus.$emit('share',this.strmsg);
         }
      }
   }
</script> 

兄弟组件B

<script> 
// 导入eventBus.js
import bus from '@/components/eventBus.js'

export default{
    data(){
        return {
            count:0,
            msgFromSon:''
        }
    },
    created(){// 为bus绑定自定义事件
        bus.$on('share',val=>{
            console.log('定义的share事件被触发了')
            this.msgFromSon = val;
        });
    }
}
</script>