技术大解密：Vue2与Vue3的10种组件通信方式

2023-12-21 20:29:05

在Vue框架中，组件通信是构建复杂应用程序的关键技术。Vue2和Vue3提供了多种组件通信方式，包括父子组件通信、兄弟组件通信、祖孙组件通信、全局广播事件、事件总线、自定义事件、provide/inject等。本文将通过选项式API、组合式API和setup三种实现方式全面介绍Vue2和Vue3的10种组件通信方式。

1. 父子组件通信

父子组件通信是最常见的组件通信方式，是指父组件向子组件传递数据或方法，或者子组件向父组件发送事件。

选项式API

在Vue2中，可以使用props和emit实现父子组件通信。props用于父组件向子组件传递数据，emit用于子组件向父组件发送事件。

<template>
  <div>
    <child-component :message="message" @update="handleUpdate"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  methods: {
    handleUpdate(message) {
      this.message = message
    }
  }
}
</script>

<template>
  <div>
    {{ message }}
    <button @click="handleClick">更新数据</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    handleClick() {
      this.$emit('update', 'Hello, Vue3!')
    }
  }
}
</script>

组合式API

在Vue3中，可以使用props和emit实现父子组件通信。props用于父组件向子组件传递数据，emit用于子组件向父组件发送事件。

<template>
  <div>
    <child-component :message="message" @update="handleUpdate"></child-component>
  </div>
</template>

<script>
import { defineProps, onMounted } from 'vue'

export default {
  props: defineProps(['message']),
  setup(props, { emit }) {
    const handleUpdate = (message) => {
      emit('update', message)
    }

    onMounted(() => {
      console.log(props.message)
    })

    return {
      handleUpdate
    }
  }
}
</script>

<template>
  <div>
    {{ message }}
    <button @click="handleClick">更新数据</button>
  </div>
</template>

<script>
import { defineProps, emit } from 'vue'

export default {
  props: defineProps(['message']),
  setup(props) {
    const handleClick = () => {
      emit('update', 'Hello, Vue3!')
    }

    return {
      handleClick
    }
  }
}
</script>

setup

在Vue2和Vue3中，都可以使用setup实现父子组件通信。setup方法返回一个对象，该对象可以包含数据、方法、生命周期钩子等。

<template>
  <div>
    <child-component :message="message" @update="handleUpdate"></child-component>
  </div>
</template>

<script>
export default {
  setup() {
    const message = ref('Hello, Vue!')

    const handleUpdate = (message) => {
      message.value = message
    }

    return {
      message,
      handleUpdate
    }
  }
}
</script>

<template>
  <div>
    {{ message }}
    <button @click="handleClick">更新数据</button>
  </div>
</template>

<script>
export default {
  setup(props, { emit }) {
    const message = ref(props.message)

    const handleClick = () => {
      emit('update', 'Hello, Vue3!')
    }

    return {
      message,
      handleClick
    }
  }
}
</script>

2. 兄弟组件通信

兄弟组件通信是指在同一级组件之间进行通信。

选项式API

在Vue2中，可以使用事件总线实现兄弟组件通信。事件总线是一个全局对象，可以用于组件之间的通信。

<template>
  <div>
    <child-component-1 @update="handleUpdate"></child-component-1>
    <child-component-2 @update="handleUpdate"></child-component-2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  methods: {
    handleUpdate(message) {
      this.message = message
    }
  }
}
</script>

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  methods: {
    handleClick() {
      this.$emit('update', 'Hello, Vue3!')
    }
  }
}
</script>

组合式API

在Vue3中，可以使用事件总线实现兄弟组件通信。事件总线是一个全局对象，可以用于组件之间的通信。

<template>
  <div>
    <child-component-1 @update="handleUpdate"></child-component-1>
    <child-component-2 @update="handleUpdate"></child-component-2>
  </div>
</template>

<script>
import { onMounted } from 'vue'
import eventBus from '../eventBus'

export default {
  setup() {
    const message = ref('Hello, Vue!')

    const handleUpdate = (message) => {
      message.value = message
    }

    onMounted(() => {
      eventBus.on('update', handleUpdate)
    })

    return {
      message
    }
  }
}
</script>

<template>
  <div>
    {{ message }}
    <button @click="handleClick">更新数据</button>
  </div>
</template>

<script>
import eventBus from '../eventBus'

export default {
  setup() {
    const message = ref('Hello, Vue!')

    const handleClick = () => {
      eventBus.emit('update', 'Hello, Vue3!')
    }

    return {
      message,
      handleClick
    }
  }
}
</script>

setup

在Vue2和Vue3中，都可以使用setup实现兄弟组件通信。setup方法返回一个对象，该对象可以包含数据、方法、生命周期钩子等。

<template>
  <div>
    <child-component-1 @update="handleUpdate"></child-component-1>
    <child-component-2 @update="handleUpdate"></child-component-2>
  </div>
</template>

<script>
export default {
  setup() {
    const message = ref('Hello, Vue!')

    const handleUpdate = (message) => {
      message.value = message
    }

    return {
      message,
      handleUpdate
    }
  }
}
</script>

<template>
  <div>
    {{ message }}
    <button @click="handleClick">更新数据</button>
  </div>
</template>

<script>
export default {
  setup() {
    const message = ref('Hello, Vue!')

    const handleClick = () => {
      this.$emit('update', 'Hello, Vue3!')
    }

    return {
      message,
      handleClick
    }
  }
}
</script>