组件通信

由于每个组件是相互独立的，无法直接访问其他组件的数据，想要实现组件与组件之间的信息传递，要通过组件通信。

组件通信的分类

组件通信按关系可分为：“父子”组件通信和“非父子”组件通信。

“父子”关系的组件通信

所谓“父子”关系，就是一个组件包裹另一个组件。

• 父传子

<!--父组件-->
<template>
  <div class="boxFu">
    {{ msg }}
    <!--给形成父子关系的组件标签，添加一个属性，注意该属性决定子组件内接受数据的变量名-->
    <two-div :message="msg"></two-div>
  </div>
</template>

<script>
// 注册组件TwoDiv
import TwoDiv from './TwoDiv.vue'
export default {
  data () {
    return {
      msg: '我是父盒子'
    }
  },
  components: { TwoDiv }
}
</script>

<style>
.boxFu{
  width: 250px;
  height: 250px;
  border: 1px solid black;
}
</style>


<!--子组件-->
<template>
  <div class="boxzi">
    {{ msg2 }} {{ message }}
  </div>
</template>

<script>
export default {
  // 通过props接受传递低调信息
  /* 你也可以选择完整写法对信息进行校验
        props: {
          属性名： {  //以下属性可任选
            type: 类型,
            required: true,  //是否必填
            default: 默认值,  //未传递或传递错误提供的默认值
            validator (value) { //用于编写自己的判断逻辑
              return true/false
            }
          }
        }
  */
  props: ['message'],
  data () {
    return {
      msg2: '我是子盒子'
    }
  }
}
</script>

<style>
.boxzi{
  width: 120px;
  height: 120px;
  border: 1px solid black;
}
</style>

• 子传父

<!--父组件-->
<template>
  <div class="boxFu">
    {{ msg }}
    <!--父组件对子组件事件进行监听-->
    <two-div @changeMessage="changeMsgFu"></two-div>
  </div>
</template>

<script>
import TwoDiv from './TwoDiv.vue'
export default {
  data () {
    return {
      msg: '我是父盒子'
    }
  },
  components: { TwoDiv },
  methods: {
    changeMsgFu (res) {
      this.msg = res
    }
  }
}
</script>

<style>
.boxFu{
  width: 250px;
  height: 250px;
  border: 1px solid black;
}
</style>


<!--子组件-->
<template>
  <div class="boxzi">
    {{ msg2 }}
    <!--注册一个点击事件-->
    <button @click="changeMsg">倒反天罡</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg2: '我是子盒子'
    }
  },
  methods: {
    changeMsg () {
      // 在组件通信中是不允许对props传递的值进行修改的，也就是单向数据流
      // 通过$emit通知父组件
      this.$emit('changeMessage', this.msg2)
    }
  }
}
</script>

<style>
.boxzi{
  width: 120px;
  height: 120px;
  border: 1px solid black;
}
</style>

”非父子“关系的组件通信

通过EventBus 可以实现简易的信息传递

<!--组件1-->
<template>
  <div class="boxzi">
    {{ msg2 }}
  </div>
</template>

<script>
import Bus from '@/utils/EventBus'
export default {
  created () {
    // 监听Bus实例的事件
    Bus.$on('send', (res) => {
      this.msg2 = res
    })
  },
  data () {
    return {
      msg2: '我是子盒子'
    }
  }
}
</script>

<style>
.boxzi{
  width: 120px;
  height: 120px;
  border: 1px solid black;
}
</style>


<!--组件2-->
<template>
  <div class="boxzi">
    {{ msg3 }}
    <button @click="SendMsg">发送</button>
  </div>
</template>

<script>
import Bus from '@/utils/EventBus'
export default {
  data () {
    return {
      msg3: '我是子盒子2'
    }
  },
  methods: {
    SendMsg () {
      // 触发Bus实例事件
      Bus.$emit('send', '3盒子来发送')
    }
  }
}
</script>

<style>
.boxzi{
  width: 120px;
  height: 120px;
  border: 1px solid black;
}
</style>

如果更复杂的需要使用vuex进行解决。