一网打尽：Vue之间、跨级通讯详尽攻略

2023-12-11 04:44:40

跨级组件通信：掌握Vue应用中的数据传递

在Vue应用开发中，组件间通信至关重要，尤其是跨级通信，即父组件与子孙组件或兄弟组件之间的数据传递。本文将深入剖析跨级通信的三种常见场景，并提供详尽的解决方案，助你轻松应对各类通信挑战。

父子通信

父子通信是最常见也是最容易理解的一种跨级通信。父组件通过props 向下传递数据，子组件通过emit 事件向上触发数据修改，实现双向通信。

代码示例：

// 父组件
<template>
  <ChildComponent :message="message"></ChildComponent>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  }
}
</script>

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

<script>
export default {
  props: ['message'],
  emits: ['updateMessage'],
  methods: {
    updateMessage(newMessage) {
      this.$emit('updateMessage', newMessage)
    }
  }
}
</script>

兄弟通信

兄弟通信是指两个组件之间没有直接父子关系，但需要进行数据传递。最常用的方法是通过eventBus ，一个全局的事件总线，来实现。

代码示例：

// 组件A
<template>
  <button @click="handleClick">Send Message</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$eventBus.$emit('message', 'Hello, Component B!')
    }
  }
}
</script>

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

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.$eventBus.$on('message', (message) => {
      this.message = message
    })
  }
}
</script>

跨级通信

跨级通信是指父组件需要与孙组件或兄弟组件进行数据传递。这里，provide/inject 和Vuex 两种方式最为常用。

provide/inject

provide/inject通过在祖先组件中提供数据，让子孙组件通过inject 注入数据，实现跨级通信。

代码示例：

// 祖先组件
<template>
  <ChildComponent />
</template>

<script>
export default {
  provide() {
    return {
      message: 'Hello, Vue!'
    }
  }
}
</script>

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

<script>
export default {
  inject: ['message'],
  template: '<div>{{ message }}</div>'
}
</script>

Vuex

Vuex是一个状态管理库，通过集中管理应用中的状态，实现跨级通信。

代码示例：

// Vuex Store
export default new Vuex.Store({
  state: {
    message: 'Hello, Vue!'
  },
  getters: {
    getMessage: (state) => {
      return state.message
    }
  },
  mutations: {
    setMessage: (state, newMessage) => {
      state.message = newMessage
    }
  }
})

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

<script>
export default {
  computed: {
    message: () => {
      return this.$store.getters.getMessage
    }
  }
}
</script>

// 组件B
<template>
  <button @click="handleClick">Send Message</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$store.commit('setMessage', 'Hello, Component A!')
    }
  }
}
</script>