Vue2.0 父子组件之间通信

本文章分享我在做vue项目中遇到的父子组件之间通信和数据传递的问题。

在vue2.0中，已经废弃了 $dispatch 和 broadcast ,推荐使用Vuex。

但是平时做一些简单的组件可以使用简单的数据通信工具。

父子组件传递数据：

1、父组件向子组件传递:

父组件：

<template>
  <div>
    <input type="text" v-model="msg">
    <br>
    //将子控件属性sendMsg与父组件msg属性绑定，通过sengMsg传送
    <child :sendMsg="msg"></child>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        msg: '我的父组件'
      }
    },
    components: {
      child: require('./Child.vue')
    }
  }
</script>

子组件：

<template>
  <div>
    <p>{{sendMsg}}</p>
  </div>
</template>
<style>

</style>
<script>
    export default{
        props: {
          sendMsg: String
        }
    }
</script>

2、子组件向父组件传递数据：

父组件：

<template>
  <div>
<!-- message为父子组件通信的通道；recieveMessage为父组件监听到后的方法 -->
    <child2 @message="recieveMessage"></child2>
  </div>
</template>
<script>
  import {Toast} from 'mint-ui'
  export default{
    components: {
      child2: require('./Child2.vue'),
    },
    methods: {
      recieveMessage: function (el) {
        cosole.log(el); //打印出原生的div元素
      }
    }
  }
</script>

子组件：

<template>
    <div class='onput' @click='addEvent'></div>
</template>
<script>
  export default{
    methods: {
      addEvent(event) {
         this.$emit('message', event.target);
         //获取div的原生DOM元素
         //这里的message实际上对应了父组件中的message，两者一致才可以交互数据。
      }
    }
  }
</script>

有一点值得注意：如何在子组件和子组件之间传递数据？这里我想到可以借助父组件这个跳板，把从A子组件获取的数据写入自己的data中，然后传给B子组件。

父组件的recieveMessage中将获取的数据写入data
data() {
    el: {}
},
methods: {
      recieveMessage: function (el) {
        this.el = el;
      }
    }

再传递给子组件B。

vue2.0还有一个值得关注的问题，组件之间如何通信？官网提供了一种方法：

// 将在各处使用该事件中心
// 组件通过它来通信
//在一个单独的文件里写入下面内容，命名为eventHub.js
improt vue from 'vue';
export default  {
    bus: new Vue()
}

在子组件中引用：

import eventHub form 'eventHub.js';

然后是数据传递和通信的同时实现：

父组件：

<template>
  <div>
//message为父子组件通信的通道；recieveMessage为父组件监听到后的方法
    <child2 @message="recieveMessage"></child2>
    <child3 ref="child3"></child3>
  </div>
</template>
<script>
  export default{
    data() {
        el: {}
    },
    components: {
      child2: require('./Child2.vue'),
      child3: require('./Child3.vue'),
    },
    methods: {
      recieveMessage: function (el) {
        this.$refs.child3.drop(el); //在父组件上调用子组件3的drop方法。
      }
    }
  }
</script>

子组件2：

<template>
    <div class='onput' @click='addEvent'></div>
</template>
<script>
  export default{
    methods: {
      addEvent(event) {
         this.$emit('message', event.target);
         //获取div的原生DOM元素
         //这里的message实际上对应了父组件中的message，两者一致才可以交互数据。

        eventHub.bus.$emit('add', event.target);//组件之间通信
      }
    }
  }
</script>

子组件3：

<template>
  <div>{{el}}</div>
</template>
<script>
  export default{
    methods: {
          drop(el) {
          console.log(el); //打印出子组件2的div元素。
        }
      }
    }
  }
</script>

至此，完成了父子组件之间的通信和数据交互联合使用，非常简单实用。