vue 组件之间的数据共享

组件之间常见的关系为父子关系，兄弟关系。

父组件向子组件传递数据

核心: 用自定义属性来传递

子组件向父组件传递数据

核心: 用自定义事件 (事件是用@来绑定的)

兄弟组件之间的数据共享

兄弟组件之间数据共享的方案是 EventBus

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

注意：EventBus不仅仅可以使用在兄弟组件之间，也可以使用在嵌套比较深的两个组件中。

demo(三种数据共享在同一个demo)：

1. 父 -> 子共享数据 ：App.vue -> Right.vue
2. 子 -> 父共享数据 ： Left.vue -> App.vue
3. 兄弟组件的数据共享：Left.vue -> Right.vue

App.vue:

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <p>{{str}}</p>
    <hr />

    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <Left @stringtext="getstring"></Left>
      <Right :user="user" :aaa="info"></Right>
    </div>
  </div>
</template>

<script>
import Left from "@/components/Left.vue"
import Right from "@/components/Right.vue"
export default {
  components:{
    Left,
    Right
  },
  data() {
    return {
      user:'数据共享 父传子',
      info: {name : 'zs', age: 50},
      str: ''
    }
  },
  methods: {
    getstring(val){
      this.str = val
    }
  },
}
</script>

Left.vue

<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <button @click="action">传送</button>
    <button @click="add">传给Right</button>
    <MyCount></MyCount>
  </div>
</template>

<script>
import bus from "@/components/EventBus.js"
export default {
  data() {
    return {
      message: '黑云压城城欲摧'
    }
  },
  methods: {
    action(){
      this.$emit('stringtext',this.message)
    },
    add(){
      bus.$emit('short',this.message)
    }
  },
}
</script>

Right.vue

<template>
  <div class="right-container">
    <h3>Right 组件</h3>
    <p>兄弟关系传递结果： {{getadd}}</p>
    <p>父传子结果: {{ user }} --- {{ aaa }}</p>
    <MyCount :init="9"></MyCount>
  </div>
</template>

<script>
import bus from "@/components/EventBus.js"
export default {
  props:['user','aaa'],
  data() {
    return {
      getadd: ''
    }
  },
  created() {
    bus.$on('short', (val)=>{
      this.getadd = val;
    })
  },
}
</script>

EventBus.js

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

效果图(忽略 style)：