vue实现组件通信

父子组件通信

通过 props 和 $emit 实现父子组件通信。父组件通过 props 向子组件传递数据，子组件通过 $emit 触发事件向父组件传递数据。

父组件传递数据：

<template>
  <ChildComponent :message="parentMessage" @update="handleUpdate" />
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  },
  methods: {
    handleUpdate(newMessage) {
      this.parentMessage = newMessage
    }
  }
}
</script>

子组件接收和发送数据：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendMessage">Send to Parent</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    sendMessage() {
      this.$emit('update', 'New message from child')
    }
  }
}
</script>

兄弟组件通信

通过共同的父组件作为中介实现兄弟组件通信。一个子组件通过 $emit 向父组件发送数据，父组件再通过 props 传递给另一个子组件。

父组件：

<template>
  <ChildA @message-sent="handleMessage" />
  <ChildB :message="sharedMessage" />
</template>

<script>
export default {
  data() {
    return {
      sharedMessage: ''
    }
  },
  methods: {
    handleMessage(message) {
      this.sharedMessage = message
    }
  }
}
</script>

跨层级组件通信

使用 provide 和 inject 实现跨层级组件通信。祖先组件通过 provide 提供数据，后代组件通过 inject 注入数据。

祖先组件：

<script>
export default {
  provide() {
    return {
      sharedData: 'Data from ancestor'
    }
  }
}
</script>

后代组件：

<script>
export default {
  inject: ['sharedData'],
  mounted() {
    console.log(this.sharedData)
  }
}
</script>

全局事件总线

创建一个全局事件总线实现任意组件间通信。在 Vue 原型上添加一个事件总线实例，组件通过 $on 和 $emit 进行通信。

创建事件总线：

// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()

发送事件：

import { EventBus } from './eventBus.js'
EventBus.$emit('event-name', data)

接收事件：

import { EventBus } from './eventBus.js'
EventBus.$on('event-name', data => {
  console.log(data)
})

Vuex 状态管理

使用 Vuex 进行集中式状态管理，适用于大型应用中的组件通信。

定义 store：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    }
  }
})

组件中使用：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  methods: {
    increment() {
      this.$store.dispatch('increment')
    }
  }
}
</script>

使用 $attrs 和 $listeners

通过 $attrs 和 $listeners 实现跨层级属性传递和事件监听。

父组件：

<template>
  <ChildComponent v-bind="$attrs" v-on="$listeners" />
</template>

中间组件不需要显式声明 props 和 events，自动传递到子组件。

使用 $refs

通过 $refs 直接访问子组件实例和方法。

父组件：

<template>
  <ChildComponent ref="child" />
  <button @click="callChildMethod">Call Child Method</button>
</template>

<script>
export default {
  methods: {
    callChildMethod() {
      this.$refs.child.childMethod()
    }
  }
}
</script>

子组件：

<script>
export default {
  methods: {
    childMethod() {
      console.log('Child method called')
    }
  }
}
</script>