燃爆！Vue 2.x 之 10 大组件间通信秘籍，代码实例奉上

2024-01-13 05:56:05

Vue 2.x 组件间通信：揭秘 10 大绝招

在构建复杂且可维护的 Vue 2.x 应用程序时，组件间通信至关重要。掌握组件间通信的方式将为你的应用程序注入可模块化性、可重用性，并显著提升性能和维护性。在这篇文章中，我们将深入探讨 10 种行之有效的 Vue 2.x 组件间通信技术，并通过代码示例生动地阐述这些技术。

1. 父子组件通信：props

想象一下，你有一个父组件需要将数据传递给它的子组件。props 便是这一场景的最佳帮手。它允许父组件通过声明 props 的方式向子组件传递数据，子组件随后可以通过 props 来接收这些数据。

<!-- 父组件 -->
<template>
  <child-component :message="myMessage" />
</template>

<script>
  export default {
    data() {
      return {
        myMessage: 'Hello from the parent!'
      }
    }
  }
</script>

<!-- 子组件 -->
<template>
  <p>{{ message }}</p>
</template>

<script>
  export default {
    props: ['message']
  }
</script>

2. 子父组件通信：emit

当子组件需要向父组件传递数据时，emit 事件便应运而生。子组件通过 emit 发出事件，父组件监听并处理该事件。

<!-- 子组件 -->
<template>
  <button @click="emitMessage">Send Message</button>
</template>

<script>
  export default {
    methods: {
      emitMessage() {
        this.$emit('message', 'Hello from the child!')
      }
    }
  }
</script>

<!-- 父组件 -->
<template>
  <child-component @message="handleMessage" />
</template>

<script>
  export default {
    methods: {
      handleMessage(message) {
        // 处理子组件发来的信息
        console.log(message)
      }
    }
  }
</script>

3. 兄弟组件间通信：Event Bus

Event Bus 扮演着组件间通信桥梁的角色，特别适用于兄弟组件之间的通信。组件通过 Event Bus 发出事件，其他组件监听并处理这些事件。

// event-bus.js
export default new Vue()

// 组件 A
import eventBus from './event-bus.js'

eventBus.$on('message', (message) => {
  // 处理消息
})

eventBus.$emit('message', 'Hello from component A!')

// 组件 B
import eventBus from './event-bus.js'

eventBus.$on('message', (message) => {
  // 处理消息
})

4. 父组件获取子组件：$refs

refs 允许父组件直接访问子组件的引用。父组件可以使用 `refs.子组件名` 来获取该子组件的引用，进而操作子组件或获取其数据。

<!-- 父组件 -->
<template>
  <child-component ref="child" />
</template>

<script>
  export default {
    mounted() {
      console.log(this.$refs.child) // 输出子组件实例
    }
  }
</script>

<!-- 子组件 -->
<template>
  <p>I'm the child component!</p>
</template>

5. 子组件获取父组件：$parent

与 refs 相对应，parent 提供了子组件访问其父组件的方式。子组件可以通过 $parent 来访问父组件的数据和方法。

<!-- 子组件 -->
<template>
  <p>{{ $parent.message }}</p>
</template>

<script>
  export default {
    mounted() {
      console.log(this.$parent) // 输出父组件实例
    }
  }
</script>

<!-- 父组件 -->
<template>
  <child-component />
</template>

<script>
  export default {
    data() {
      return {
        message: 'Hello from the parent!'
      }
    }
  }
</script>

6. 组件获取根组件：$root

无论组件嵌套层级有多深，root 始终指向根组件。任何组件都可以通过 `root` 来访问根组件的数据和方法。

<!-- 深层嵌套子组件 -->
<template>
  <p>{{ $root.message }}</p>
</template>

<script>
  export default {
    mounted() {
      console.log(this.$root) // 输出根组件实例
    }
  }
</script>

<!-- 根组件 -->
<template>
  <child-component />
</template>

<script>
  export default {
    data() {
      return {
        message: 'Hello from the root!'
      }
    }
  }
</script>

7. 组件获取子组件：$children

children 提供了父组件访问其所有子组件数组的方式。父组件可以使用 `children` 来访问子组件的数据和方法。

<!-- 父组件 -->
<template>
  <child-component-1 />
  <child-component-2 />
</template>

<script>
  export default {
    mounted() {
      this.$children.forEach((child) => {
        console.log(child) // 输出每个子组件实例
      })
    }
  }
</script>

<!-- 子组件 1 -->
<template>
  <p>I'm child component 1!</p>
</template>

<!-- 子组件 2 -->
<template>
  <p>I'm child component 2!</p>
</template>

8. provide/inject

provide/inject 机制允许祖先组件向其子孙组件传递数据。祖先组件使用 provide 提供数据，而子孙组件使用 inject 注入数据。

<!-- 祖先组件 -->
<template>
  <provide>
    <child-component />
  </provide>
</template>

<script>
  export default {
    provide() {
      return {
        message: 'Hello from the ancestor!'
      }
    }
  }
</script>

<!-- 子孙组件 -->
<template>
  <p>{{ message }}</p>
</template>

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

9. Vuex

Vuex 是一个强大的状态管理库，用于管理应用程序的全局状态。组件通过 Vuex 来访问和修改全局状态。

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    getCount: (state) => state.count
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

export default store

// 组件
<template>
  <p>Count: {{ count }}</p>
  <button @click="increment">Increment</button>
</template>

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

  export default {
    computed: {
      count() {
        return store.getters.getCount
      }
    },
    methods: {
      increment() {
        store.commit('increment')
      }
    }
  }
</script>

10. mitt.js

mitt.js 是一个轻量级的事件总线库，可用于组件间通信。组件通过 mitt.js 发出事件，其他组件通过 mitt.js 监听并处理这些事件。

// 事件总线
import mitt from 'mitt'

const emitter = mitt()

// 组件 A
emitter.on('message', (message) => {
  // 处理消息
})

emitter.emit('message', 'Hello from component A!')

// 组件 B
emitter.on('message', (message) => {
  // 处理消息
})