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中将获取的数据写入datadata() {    el: {}},methods: {      recieveMessage: function (el) {        this.el = el;      }    }

再传递给子组件B。

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

// 将在各处使用该事件中心// 组件通过它来通信//在一个单独的文件里写入下面内容，命名为eventHub.jsimprot 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>

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