2023Vue 组件间通信的六种方式

Vue 是一个流行的 JavaScript 框架，用于构建单页应用程序。在 Vue 中，组件是构建应用程序的基本单位，组件是用于显示和处理数据的可复用代码块。组件通信是组件之间数据传递和交互的核心机制之一。在本文中，我们将探讨六种组件通信方式。

一、Props 和 Events

Props 和 Events 是 Vue 中最基本的组件通信方式。通过 props，父组件向子组件传递数据。而子组件通过 events 构造函数向父组件发送数据。这种通信方式的特点是单向传递。

父组件通过 props 将数据传递给子组件：

<template>
  <child-component :message="parentMessage"></child-component>
</template>
<script>
  import ChildComponent from './ChildComponent.vue'
  export default {
    data() {
      return {
        parentMessage: 'this is parent'
      }
    },
    components: {
      ChildComponent
    }
  }
</script>

在子组件中，需要声明 props，并使用 props 接收来自父组件的数据：

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

然后，子组件通过 events 发送数据给父组件：

<template>
  <button @click="updateParentMessage">Update Parent Message</button>
</template>
<script>
  export default {
    methods: {
      updateParentMessage() {
        this.$emit('update-message', 'this is child');
      }
    }
  }
</script>

在父组件中，需要为子组件监听 events，在事件监听函数中接收来自子组件的数据：

<template>
  <child-component :message="parentMessage" @update-message="updateMessage"></child-component>
</template>
<script>
  import ChildComponent from './ChildComponent.vue'
  export default {
    data() {
      return {
        parentMessage: 'this is parent'
      }
    },
    components: {
      ChildComponent
    },
    methods: {
      updateMessage(message) {
        this.parentMessage = message;
      }
    }
  }
</script>

二、Vuex

Vuex 是 Vue 中用于状态管理的一个官方插件。Vuex 实现了一个全局的状态管理模式。它通过 store 集中管理应用程序的所有组件的状态。当多个组件共享状态时，使用 Vuex 可以更方便地管理组件之间的数据交换和通信。

首先，我们需要创建一个 Vuex store：

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    message: 'hello world'
  },
  mutations: {
    updateMessage(state, message) {
      state.message = message
    }
  },
  actions: {
    updateMessage({ commit }, message) {
      commit('updateMessage', message)
    }
  },
  getters: {
    getMessage: state => state.message
  }
})

export default store

在组件中，我们可以使用 $store 访问 store 中的状态，使用 commit 方法来提交 mutations 来修改状态：

<template>
  <div>{{ this.$store.getters.getMessage }}</div>
  <button @click="updateMessage">Update Message</button>
</template>
<script>
  export default {
    methods: {
      updateMessage() {
        this.$store.dispatch('updateMessage', 'hello vuex')
      }
    }
  }
</script>

三、$parent 和 $children

Vue 中的每个组件都具有 $parent 和 $children 属性。$parent 属性指向组件的父组件，$children 属性指向组件的子组件。通过 $parent 和 $children 属性，组件可以直接访问父组件和子组件的数据和方法。

例如，父组件可以通过 $children 属性访问子组件的数据和方法：

<template>
  <div>
    {{ $children[0].message }}
    <button @click="$children[0].updateMessage">Update message</button>
  </div>
</template>

在子组件中，需要定义 message 和 updateMessage 方法：

<template>
  <div>{{ message }}</div>
</template>
<script>
  export default {
    data() {
      return {
        message: 'hello child'
      }
    },
    methods: {
      updateMessage() {
        this.message = 'hello parent'
      }
    }
  }
</script>

四、$refs

Vue 中的每个组件都具有 $refs 属性。$refs 属性是一个对象，包含了在组件中使用 ref 属性命名的子组件或 DOM 元素的引用。通过 $refs 属性，组件之间可以相互引用和调用。

例如，我们可以在父组件中通过 ref 属性获取子组件的引用：

<template>
  <div>
    <child-component ref="childComponent"></child-component>
    <button @click="updateMessage">Update message</button>
  </div>
</template>
<script>
  import ChildComponent from './ChildComponent.vue'
  export default {
    components: {
      ChildComponent
    },
    methods: {
      updateMessage() {
        this.$refs.childComponent.updateMessage()
      }
    }
  }
</script>

在子组件中，我们需要定义 updateMessage 方法：

<template>
  <div>{{ message }}</div>
</template>
<script>
  export default {
    data() {
      return {
        message: 'hello child'
      }
    },
    methods: {
      updateMessage() {
        this.message = 'hello parent'
      }
    }
  }
</script>

五、Event Bus

Event Bus 是一种广泛使用的中央事件系统，可以在 Vue 组件之间有效地传递事件。Event Bus 是一个简单的 Vue 实例，可以通过 $emit 方法向其他 Vue 组件发送事件，也可以通过 $on 方法接收其他 Vue 组件发送的事件。

在实现 Event Bus 时，我们需要创建一个新的 Vue 实例：

import Vue from 'vue'

const bus = new Vue()

export default bus

然后，我们可以在组件中引入 Event Bus 并使用 $emit 发送事件，使用 $on 接收事件：

// 发送事件
import Bus from './Bus.js'

Bus.$emit('event-name', data)

// 接收事件
import Bus from './Bus.js'

Bus.$on('event-name', (data) => {
  console.log(data)
})

六、Provide 和 Inject

Vue 2.2 中新增的 Provide 和 Inject 是一种高级的组件通信方式。Provide 和 Inject 允许父组件将数据传递给所有后代组件，而不是只传递给直接子组件。Provide 和 Inject 是一种不同于 props、events 和 $parent/$children 的组件通信形式，是一种更加灵活和封装性更强的通信方式。

父组件通过 provide 提供数据：

<template>
  <child-component></child-component>
</template>
<script>
  export default {
    provide: {
      message: 'hello provide'
    }
  }
</script>

在子组件中，我们需要定义 inject 接收父组件传递的数据：

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

这就是六种 Vue 组件通信方式的介绍。不同的应用场景需要采用不同的组件通信方式。掌握这些通信方式可以使 Vue 组件的开发更加高效、简单和灵活。

以上就是Vue 组件间通信的六种方式的详细内容，更多请关注zzsucai.com其它相关文章！