Vue组件之间的通信方式都有哪些？

最新推荐文章于 2024-06-26 09:20:14 发布

YJYD

最新推荐文章于 2024-06-26 09:20:14 发布

阅读量96

点赞数

分类专栏： Vue 前端框架文章标签： vue.js javascript html5 前端框架

本文链接：https://blog.csdn.net/liuqingup/article/details/131264626

版权

前端框架同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

Vue

3 篇文章 0 订阅

订阅专栏

文章介绍了Vue框架中组件间的通信方法，包括通过props实现的父子组件通信、使用自定义事件进行子父组件通信，以及非父子组件间利用EventBus和Vuex进行通信。示例代码详细展示了各种通信方式的实践。

摘要由CSDN通过智能技术生成

Vue框架中，组件之间的通信是必不可少的。我们可以使用多种方式实现组件之间的通信，包括：

1.父子组件通信

父子组件通信是一种常见的通信方式，可以通过props属性实现父组件向子组件传递数据。例如：

// 父组件
<template>
  <div>
    <child-component :message="msg"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  data() {
    return {
      msg: '父组件传递的消息'
    }
  },
  components: {
    ChildComponent
  }
}
</script>

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

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

2.子父组件通信

子父组件通信与父子组件通信相反，是子组件向父组件传递数据。我们可以通过自定义事件实现。例如：

// 子组件
<template>
  <button @click="sendMsg">向父组件发送消息</button>
</template>

<script>
export default {
  methods: {
    sendMsg() {
      this.$emit('my-event', '子组件向父组件发送的消息')
    }
  }
}
</script>

// 父组件
<template>
  <div>
    <child-component @my-event="handleMsg"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  methods: {
    handleMsg(msg) {
      console.log('接收到的消息：', msg)
    }
  },
  components: {
    ChildComponent
  }
}
</script>

3.非父子组件通信

有时我们需要在非父子组件之间进行通信，Vue提供了多种方式实现。

3.1. 使用Event Bus

事件总线是一种非常方便的通信方式，我们可以定义一个空的Vue实例，将它作为事件中心，用于接收和分发事件。例如：

// Bus.js
import Vue from 'vue'

export const bus = new Vue()

// A组件
<template>
  <button @click="sendMsg">发送消息</button>
</template>

<script>
import { bus } from './Bus.js'

export default {
  methods: {
    sendMsg() {
      bus.$emit('my-event', 'A组件向B组件发送的消息')
    }
  }
}
</script>

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

<script>
import { bus } from './Bus.js'

export default {
  data() {
    return {
      message: ''
    }
  },
  created() {
    bus.$on('my-event', msg => {
      this.message = msg
    })
  }
}
</script>

3.2. 使用Vuex

Vuex是Vue的状态管理工具，它提供了一个集中式存储管理应用的所有组件中的状态。我们可以通过Vuex实现非父子组件之间的通信。例如：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    setMessage(state, message) {
      state.message = message
    }
  },
  actions: {
    setMessage({ commit }, message) {
      commit('setMessage', message)
    }
  }
})

// A组件
<template>
  <button @click="sendMsg">发送消息</button>
</template>

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

export default {
  methods: {
    sendMsg() {
      store.dispatch('setMessage', 'A组件向B组件发送的消息')
    }
  }
}
</script>

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

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState([
      'message'
    ])
  }
}
</script>