Vue.js实现跨组件通信的几种方式

Vue.js实现跨组件通信的几种方式

在Vue.js开发中，组件之间的通信是不可避免的。但是，由于Vue单向数据流的限制，在一些情况下，需要实现跨组件的通信。下面介绍几种常见的Vue跨组件通信方式。

1. 父子组件通信
通过props向子组件传递数据，子组件使用$emit来向父组件触发事件，从而实现双向通信。

父组件： 
<template>
  <div>
    <child :name="name" @event="handleEvent"></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  data () {
    return {
      name: 'Vue.js'
    }
  },
  methods: {
    handleEvent (val) {
      console.log(val)
    }
  }
}
</script>

子组件：
<template>
  <div>
    <button @click="$emit('event', 'Hello')">点击获取父组件的name：{{ name }}</button>
  </div>
</template>

<script>
export default {
  props: {
    name: String
  }
}
</script>

2. 兄弟组件通信
不同组件间的通信可以使用事件总线，通常可以新建一个Vue实例充当事件总线的角色，兄弟组件通过事件总线触发/监听事件来实现双向通信。

事件总线：
export default new Vue()

兄弟组件1：
<template>
  <div>
    <button @click="handleClick">发送事件给兄弟组件2</button>
  </div>
</template>

<script>
import bus from './bus.js'

export default {
  methods: {
    handleClick () {
      bus.$emit('event', 'Hello, brother2!')
    }
  }
}
</script>

兄弟组件2：
<template>
  <div>
    <p>兄弟组件2 接收到的消息：{{ message }}</p>
  </div>
</template>

<script>
import bus from './bus.js'

export default {
  data () {
    return {
      message: ''
    }
  },
  created () {
    bus.$on('event', val => {
      this.message = val
    })
  }
}
</script>

3. 跨级组件通信
跨级组件通信使用了provide和inject，父组件通过provide向子孙组件注入数据，子孙组件通过inject来注入数据。

父组件：
<template>
  <div>
    <son></son>
  </div>
</template>

<script>
export default {
  provide () {
    return {
      name: 'Vue.js'
    }
  }
}
</script>

子组件：
<template>
  <div>
    <grandson></grandson>
  </div>
</template>

<script>
import Grandson from './Grandson.vue'

export default {
  components: {
    Grandson
  }
}
</script>

孙子组件：
<template>
  <div>
    <p>父组件注入的值：{{ name }}</p>
  </div>
</template>

<script>
export default {
  inject: {
    name: {
      default: ''
    }
  }
}
</script>

以上是Vue.js实现跨组件通信的几种方式，根据实际场景选用不同的方法。同时，也要注意在使用跨组件通信时遵循Vue单向数据流的原则，避免出现意外的问题。