vue3.0父子组件之间通讯

Vue 3.0 中，父子组件之间的通讯可以通过 props 和 emit 实现。

1. 父组件向子组件传递数据：

在父组件中使用子组件时，可以通过 props 将数据传递给子组件。具体实现如下：

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

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

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

在子组件中，可以通过 props 接收父组件传递过来的数据。具体实现如下：

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

<script>
export default {
  props: {
    message: String
  }
}
</script>

2. 子组件向父组件传递数据：

在子组件中，可以使用 emit 触发一个自定义事件，并向父组件传递数据。具体实现如下：

<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

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

在父组件中使用子组件时，可以通过 v-on 监听子组件触发的自定义事件，并在事件处理函数中获取子组件传递过来的数据。具体实现如下：

<template>
  <div>
    <child-component @message="handleMessage"></child-component>
    <div>{{ receivedMessage }}</div>
  </div>
</template>

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

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

以上就是 Vue 3.0 中父子组件之间通讯的实现方式。