Vue3 组件通信：三种常用方法及示例

Vue3 中使用组件通信有以下几种方式：

props 和 emit

在父组件中通过 props 将数据传递给子组件，在子组件中通过 emit 触发事件将数据传递给父组件。

父组件中：

<template>
  <ChildComponent :message='message' @update-message='updateMessage'></ChildComponent>
</template>
<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello World'
    }
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage
    }
  }
}
</script>

子组件中：

<template>
  <div>
    <p>{{message}}</p>
    <button @click='updateMessage'>Update Message</button>
  </div>
</template>
<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  methods: {
    updateMessage() {
      this.$emit('update-message', 'New Message')
    }
  }
}
</script>

provide 和 inject

在父组件中使用 provide 提供数据，在子组件中使用 inject 注入数据。

父组件中：

<template>
  <ChildComponent></ChildComponent>
</template>
<script>
export default {
  provide: {
    message: 'Hello World'
  }
}
</script>

子组件中：

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

$emit 和 $on

通过 $emit 触发事件，在其他组件中通过 $on 监听事件并获取数据。

触发事件的组件中：

<template>
  <button @click='sendMessage'>Send Message</button>
</template>
<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello World')
    }
  }
}
</script>

监听事件的组件中：

<template>
  <div>
    <p>{{message}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.$on('message', (data) => {
      this.message = data
    })
  }
}
</script>

以上就是使用组件通信的三种方式。