¿Cuáles son los métodos de comunicación entre los componentes de Vue?

En el marco de Vue, la comunicación entre componentes es esencial. Podemos implementar la comunicación entre componentes de diversas formas, que incluyen:

1. Comunicación del componente entre padres e hijos.

La comunicación entre componentes padre-hijo es un método de comunicación común y los componentes padres pueden pasar datos a los componentes hijos a través de atributos de accesorios. Por ejemplo:

// 父组件
<template>
  <div>
    <child-component :message="msg"></child-component>
  </div>
</template>

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

export default {
  data() {
    return {
      msg: '父组件传递的消息'
    }
  },
  components: {
    ChildComponent
  }
}
</script>

// 子组件
<template>
  <div>{
   
   { message }}</div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

2. Comunicación entre componentes secundarios y principales.

La comunicación entre componentes padre-hijo es lo opuesto a la comunicación entre componentes padre-hijo: el componente hijo pasa datos al componente padre. Podemos lograr esto a través de eventos personalizados. Por ejemplo:

// 子组件
<template>
  <button @click="sendMsg">向父组件发送消息</button>
</template>

<script>
export default {
  methods: {
    sendMsg() {
      this.$emit('my-event', '子组件向父组件发送的消息')
    }
  }
}
</script>

// 父组件
<template>
  <div>
    <child-component @my-event="handleMsg"></child-component>
  </div>
</template>

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

export default {
  methods: {
    handleMsg(msg) {
      console.log('接收到的消息：', msg)
    }
  },
  components: {
    ChildComponent
  }
}
</script>

3. Comunicación de componentes que no son entre padres e hijos.

A veces necesitamos comunicarnos entre componentes no principales y secundarios, y Vue proporciona una variedad de formas de lograrlo.

3.1 Uso del bus de eventos

El bus de eventos es un método de comunicación muy conveniente: podemos definir una instancia de Vue vacía y usarla como centro de eventos para recibir y distribuir eventos. Por ejemplo:

// Bus.js
import Vue from 'vue'

export const bus = new Vue()

// A组件
<template>
  <button @click="sendMsg">发送消息</button>
</template>

<script>
import { bus } from './Bus.js'

export default {
  methods: {
    sendMsg() {
      bus.$emit('my-event', 'A组件向B组件发送的消息')
    }
  }
}
</script>

// B组件
<template>
  <div>{
   
   { message }}</div>
</template>

<script>
import { bus } from './Bus.js'

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

3.2 Usando Vuex

Vuex es una herramienta de gestión de estado para Vue, que proporciona un almacenamiento centralizado para gestionar el estado de todos los componentes de la aplicación. Podemos lograr la comunicación entre componentes no principales e secundarios a través de Vuex. Por ejemplo:

// Vuex store
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    setMessage(state, message) {
      state.message = message
    }
  },
  actions: {
    setMessage({ commit }, message) {
      commit('setMessage', message)
    }
  }
})

// A组件
<template>
  <button @click="sendMsg">发送消息</button>
</template>

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

export default {
  methods: {
    sendMsg() {
      store.dispatch('setMessage', 'A组件向B组件发送的消息')
    }
  }
}
</script>

// B组件
<template>
  <div>{
   
   { message }}</div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState([
      'message'
    ])
  }
}
</script>