返回

Vue组件通信方式大解析，深入浅出，从入门到精通！

见解分享

前言

在构建Vue.js应用程序时，我们经常需要在组件之间传递数据和事件。Vue提供了几种灵活的方式来实现组件通信，每种方式都有其独特的优势和适用场景。本文将带你深入浅出地剖析Vue组件通信的多种方式，从入门到精通，帮助你全面掌握Vue组件通信技巧，轻松构建高效、可维护的前端应用！

一、vuex状态管理模式

vuex状态管理模式是一种集中式状态管理方案，它将应用程序的状态集中在一个名为“store”的对象中，并通过“actions”和“mutations”来修改状态。组件可以通过“getters”来获取状态，也可以通过“actions”来触发状态的修改。

其数据流向如下：

  • 组件触发action
  • action提交mutation
  • mutation修改state
  • 组件获取state

使用：

  1. 安装vuex：
npm install vuex
  1. 使用：
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
})

export default store
  1. 以上已经把vuex注入到vue实例；组件中使用：
<template>
  <div>
    <button @click="increment">Increment</button>
    <p>{{ count }}</p>
    <p>{{ doubleCount }}</p>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapActions(['increment', 'incrementAsync'])
  }
}
</script>

此时:

  • 触发vuexOne.vue的addCount时间，vuexTwo.vue的页面能

  • 立即更新

二、$emit事件总线模式

$emit事件总线模式是一种最简单、最直接的组件通信方式。它允许一个组件向其父组件或祖先组件发出事件，父组件或祖先组件可以通过监听该事件来做出响应。

使用：

  1. 在子组件中触发事件：
this.$emit('my-event', data)
  1. 在父组件中监听事件：
<template>
  <child-component @my-event="handleEvent"></child-component>
</template>

<script>
export default {
  methods: {
    handleEvent (data) {
      // 做一些事情
    }
  }
}
</script>

$emit事件总线模式简单易用，但它的缺点在于它只能用于父子组件或祖先组件之间的通信，并且难以在跨级组件之间通信。

三、attrs和listeners属性传递

attrs和listeners属性传递是一种通过父组件将数据和事件传递给子组件的方式。父组件可以使用attrs属性将数据传递给子组件，子组件可以使用listeners属性监听父组件发出的事件。

使用：

  1. 在父组件中传递数据：
<child-component :attrs="{ message: 'Hello World!' }"></child-component>
  1. 在子组件中接收数据：
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: ['message']
}
</script>
  1. 在父组件中监听事件：
<child-component @my-event="handleEvent"></child-component>
  1. 在子组件中触发事件：
this.$emit('my-event', data)

attrs和listeners属性传递是一种简单有效的方式，可用于在父组件和子组件之间传递数据和事件。它的缺点在于它只能用于父子组件之间的通信，并且难以在跨级组件之间通信。

四、provide/inject方式

provide/inject方式是一种允许组件向其子组件和孙组件提供数据的注入依赖的方式。父组件可以使用provide选项来提供数据，子组件和孙组件可以使用inject选项来注入这些数据。

使用：

  1. 在父组件中提供数据：
export default {
  provide () {
    return {
      message: 'Hello World!'
    }
  }
}
  1. 在子组件中注入数据：
export default {
  inject: ['message'],
  render () {
    return <p>{{ message }}</p>
  }
}

provide/inject方式是一种灵活强大的组件通信方式，它允许在任意深度的组件之间传递数据。它的缺点在于它的使用方式相对复杂，并且在大型应用程序中可能会导致难以维护的代码。

五、ref方式

ref方式是一种通过在组件上使用ref属性来获取组件实例的引用，然后通过该引用来访问组件的属性和方法的方式。ref方式可以用于在任意组件之间通信，但它需要额外的代码来获取组件实例的引用。

使用：

  1. 在组件上使用ref属性：
<child-component ref="child"></child-component>
  1. 在父组件中获取组件实例的引用：
const child = this.$refs.child
  1. 访问组件的属性和方法：
child.message = 'Hello World!'
child.handleEvent()

ref方式是一种灵活强大的组件通信方式，它允许在任意组件之间通信。它的缺点在于它的使用方式相对复杂，并且在大型应用程序中可能会导致难以维护的代码。

总结

Vue提供了多种组件通信方式，每种方式都有其独特的优势和适用场景。在实际开发中，我们需要根据具体需求选择合适的组件通信方式，以实现高效、可维护的代码。

以下是一些选择组件通信方式的建议：

  • 如果需要在父子组件或祖先组件之间通信，可以使用emit事件总线模式或attrs和$listeners属性传递。
  • 如果需要在任意深度的组件之间通信，可以使用provide/inject方式或ref方式。
  • 如果需要在组件之间传递大量数据，可以使用vuex状态管理模式。

希望本文能帮助你全面掌握Vue组件通信技巧，轻松构建高效、可维护的前端应用！