Vue组件通信

在Vue中组件之间相互通信存在几种方法,同时相互通信的组件的相互关系又可以分为几类,这里总结一下。

父子组件通信

一、 props/$emit

props是通过向子组件传递一个参数,子组件在props参数中直接读取,就可以完成父对子组件的通信,需要注意的是props参数是只读的,不可修改,修改会导致失效和警告

$emit

子组件可以通过调用this.$emit()函数向父组件进行传参,首先$emit()可以接收多个参数,第一个参数是父组件需要监听的事件的名称,而之后的就是携带的参数就是组件要向父组件传递的参数,可以携带多个,同时父组件需要需要在子组件上使用v-on进行事件的监听并调用一个函数,这个函数的参数就是子组件传递过来的参数,数目需要对应

 this.$emit('formSubmit', this.textToTranslate); 
<template>
  <div id="app">
      <h1>在线翻译</h1>
    <h5>简单 / 易用 / 便捷</h5>
   <TranslateForm v-on:formSubmit='translateText'></TranslateForm>
  </div>
</template>

<script>
import TranslateForm from './components/TranslateForm'

export default {
  name: 'App',
  components:{
      TranslateForm
  },
  methods:{
      //可以包含多个参数
      translateText:function(text){
          alert(text)
      }
  }
}
</script>

<style>
#app {
    text-align: center;
}
</style>

二、$parent/$children

子组件可以直接通过使用$parent获得父组件的实例,从而能访问组件的所有属性和方法,同时父组件可以使用$children获取一个子组件的列表,在其中获得需要的子组件的实例

三、ref/refs

可以直接通过给子组件设置ref参数,在通过this.$refs.name获取响应组件的实例,从而完成对于子组件的操作

非父子组件的传参(隔代传参/兄弟传参)

四、eventBus

事件总线,本质上是创造一个新的事件总线组件,而在任何其他组件中,都可以调用这个组件发送事件,而在其他任何组件中都可以监听这个组件并拿到需要的参数

可以新建一个bus.js文件初始化一个新的Vue实例,或者是直接全局定义将bus挂在到vue.prototype上

在需要传递参数的组件通过emit发送事件

this.$bus.$emit('clear');

在需要监听的组件上,挂在监听函数,需要在mounted中挂载,保证一直都能监听数据

mounted(){
    this.$bus.$on('clear',()=>{
      this.keyword=''
    })
  }

这样就完成了组件之间的传参,在组件销毁时需要卸载,不然可能会出现多次挂载,造成一次触发多次回应# Vue组件通信