Vue组件通信

在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。

父组件向子组件通信

使用props，父组件可以使用props向子组件传递数据。

父组件vue模板App.vue

<template>
  <div id="app">
    <child :msg="info"></child>
  </div>
</template>

<script>
import child from './components/Child'

export default {
  name: 'app',
  data(){
    return{
      info:"我是父组件传过来的data"
    }
  },
  components: {
    child
  }
}
</script>

子组件vue模板child.vue

<template>
<div>
  <h2>Child子组件部分</h2>
  <p></p>
  </div>
</template>

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

<style scoped>

</style>

父组件向子组件传值总结：子组件在props中创建一个属性，用以接收父组件传过来的值父组件中注册子组件在子组件标签中添加子组件props中创建的属性把需要传给子组件的值赋给该属性

子组件向父组件通信

1.在子组件中创建一个按钮，给按钮绑定一个点击事件

<template>
<div>
  <h2>Child子组件部分</h2>
  <p></p>
  <button @click="sendMsgToParent"></button>
  </div>
</template>

<script>
export default {
  props:['msg'],
  methods:{
    sendMsgToParent:function(){
      
    }
  }
}
</script>

2.在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数

<template>
<div>
  <h2>Child子组件部分</h2>
  <p></p>
  <button @click="sendMsgToParent">向父组件传值</button>
  </div>
</template>

<script>
export default {
  props:['msg'],
  methods:{
    sendMsgToParent:function(){
      this.$emit('listenToChildEvent','我是来自子组件的msg')
    }
  }
}
</script>

3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

<template>
  <div id="app">
    <child :msg="info" v-on:listenToChildEvent="showMsgFromChild"></child>
    <p></p>
  </div>
</template>

<script>
import child from './components/Child'

export default {
  name: 'app',
  data(){
    return{
      info:"我是父组件传过来的data",
      childMsg:''
    }
  },
  components: {
    child
  },
  methods:{
    showMsgFromChild:function(msg){
      this.childMsg=msg;
    }
  }
}
</script>

子组件向父组件传值总结: 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

同级组件间通信

无论是父向子传值还是子向父传值，都需要一个中间介质。对于平级组件来说其实也一样，他们也需要一个中间介质来作为一个中央事件总线

一 .我们先来创建中央事件总线，在src/assets/下创建一个eventBus.js,内容如下

import Vue from 'vue'
export default new Vue;

eventBus中我们只创建了一个新的Vue实例，以后它就承担起了组件之间通信的桥梁了，也就是中央事件总线。

二 . 创建一个firstChild组件，引入eventBus这个事件总线，接着添加一个按钮并绑定一个点击事件

<template>
<div>
  <h2>firstChild组件</h2>
  <button @click="sendMsg">向组件传值</button>
  </div>
</template>

<script>
import bus from '../assets/eventBus'
export default {
  methods:{
    sendMsg:function(){
      bus.$emit('userDefineEvent','我是来自firstChild组件的msg')
    }
  }
}
</script>

我们在响应点击事件的sendMsg函数中用$emit触发了一个自定义的userDefinedEvent事件，并传递了一个字符串参数 PS:$emit实例方法触发当前实例(这里的当前实例就是bus)上的事件,附加参数都会传给监听器回调。

三 . 我们再创建一个secondChild组件，引入eventBus事件总线，并用一个p标签来显示传递过来的值

<template>
<div>
  <h2>second组件部分</h2>
  <p>从first组件接收的值：</p>
  </div>
</template>

<script>
import bus from '../assets/eventBus'
export default {
  data(){
    return{
      msg:'默认值',
    }
  },
  mounted(){
    let self=this;
    bus.$on('userDefineEvent',function(msg){
      self.msg=msg
    })
  }
}
</script>

我们在mounted中，监听了userDefinedEvent,并把传递过来的字符串参数传递给了$on监听器的回调函数 PS: mounted:是一个Vue生命周期中的钩子函数，简单点说就类似于jquery的ready，Vue会在文档加载完毕后调用mounted函数。 $on:监听当前实例上的自定义事件(此处当前实例为bus)。事件可以由$emit触发，回调函数会接收所有传入事件触发函数($emit)的额外参数。

四 . 在父组件中，注册这两个组件，并添加这两个组件的标签

<template>
  <div id="app">
   <firstChild></firstChild>
   <secondChild></secondChild>
  </div>
</template>

<script>
import firstChild from './components/firstChild'
import secondChild from './components/secondChild'

export default {
  name: 'app',
  data(){
    return{
      info:"我是父组件传过来的data",
      childMsg:''
    }
  },
  components: {
    firstChild,
    secondChild
  },
 
}
</script>

同级组件通信总结：创建一个事件总线，例如demo中的eventBus，用它作为通信桥梁在需要传值的组件中用bus.$emit触发一个自定义事件，并传递参数在需要接收数据的组件中用bus.$on监听自定义事件，并在回调函数中处理传递过来的参数

Vue三类组件通信详解

父组件向子组件通信

子组件向父组件通信

同级组件间通信

CATALOG

FEATURED TAGS

FRIENDS