vue组件间通信全面讲解

下面我将详细讲解Vue组件间通信的完整攻略。

1. 父子组件通信

父子组件通信是Vue中最常见的通信方式，我们可以通过props和$emit两个属性来实现。

1.1 通过props向子组件传递数据

我们可以通过在父组件中使用props来向子组件中传递数据。子组件中使用prop来接受数据。

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>
<script>
  import ChildComponent from './ChildComponent.vue';
  export default {
    components: { ChildComponent },
    data() {
      return {
        message: 'Hello World!'
      }
    }
  }
</script>

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>
<script>
  export default {
    props: {
      message: {
        type: String,
        default: ''
      }
    }
  }
</script>

1.2 父组件中监听子组件的事件

父组件可以通过在子组件中使用$emit来触发事件，并通过$v-on来监听子组件中的事件。

<!-- 父组件 -->
<template>
  <div>
    <child-component @customEvent="handleCustomEvent"></child-component>
  </div>
</template>
<script>
  import ChildComponent from './ChildComponent.vue';
  export default {
    components: { ChildComponent },
    methods: {
      handleCustomEvent(args) {
        console.log(args);
      }
    }
  }
</script>

<!-- 子组件 -->
<template>
  <div @click="emitCustomEvent">Click me!</div>
</template>
<script>
  export default {
    methods: {
      emitCustomEvent() {
        this.$emit('customEvent', { message: 'Hello World!'})
      }
    }
  }
</script>

2. 兄弟之间的通信

兄弟组件之间的通信不能直接通过props和$emit来实现，最常见的方式是通过一个共同的祖先组件来维护数据并触发事件。

2.1 通过eventBus实现兄弟间通信

我们可以通过在Vue实例上定义一个$eventBus属性，然后在组件内使用来实现兄弟间的通信。

// main.js
import Vue from 'vue'
export const $eventBus = new Vue()

// 兄弟A组件
import { $eventBus } from '../main'
export default {
  data() {
    return {
      message: 'Hello World from A!'
    }
  },
  methods: {
    sendMessage() {
      $eventBus.$emit('customEvent', this.message)
    }
  }
}

// 兄弟B组件
import { $eventBus } from '../main'
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    $eventBus.$on('customEvent', (args) => {
      this.message = args
    })
  }
}

2.2 通过vuex实现兄弟间通信

当组件之间的通信变得比较复杂时，我们可以使用Vuex来管理组件间的状态。

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    updateMessage: (state, payload) => {
      state.message = payload
    }
  }
});

// 兄弟A组件
import store from '../store'
export default {
  data() {
    return {
      message: 'Hello World from A!'
    }
  },
  methods: {
    sendMessage() {
      store.commit('updateMessage', this.message)
    }
  }
}

// 兄弟B组件
import { mapState } from 'vuex'
export default {
  computed: mapState({
    message: (state) => state.message
  })
}

以上是Vue组件间通信的完整攻略，希望可以帮助到你。