vue3组件通信

在Vue3中，我们可以使用两种方式进行组件通信：props和事件。

1. Props

Props是将数据从父组件传递到子组件的一种方式。在父组件中设置props属性，子组件中通过props接收数据。当父组件的数据改变时，子组件也会随之更新。

父组件：

<template>
  <div>
    <child-component :message="parentMessage" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}
</script>

子组件：

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

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

2. 事件

事件是将数据从子组件传递到父组件的一种方式。在子组件中使用$emit触发自定义事件，父组件中通过v-on监听该事件并处理数据。

子组件：

<template>
  <button @click="sendMessage">Send message to parent</button>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from child'
    }
  },
  methods: {
    sendMessage() {
      this.$emit('send-message', this.message)
    }
  }
}
</script>

父组件：

<template>
  <div>
    <p>{{ receivedMessage }}</p>
    <child-component @send-message="receiveMessage" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedMessage: ''
    }
  },
  methods: {
    receiveMessage(message) {
      this.receivedMessage = message
    }
  }
}
</script>

以上就是Vue3中使用props和事件进行组件通信的方式。需要注意的是，在Vue3中，父组件访问子组件的方法和属性需要使用ref或者$refs，而不是this.$children。