vue3父子组件使用

在 Vue 3 中，父子组件之间的通信可以通过 props 和 events 来实现。

1. 父组件向子组件传递数据：使用 props
在父组件中，通过在子组件标签上绑定属性的方式将数据传递给子组件。子组件可以通过接收 props 来访问这些数据。

父组件：

<template>
  <div>
    <ChildComponent :message="message"></ChildComponent>
  </div>
</template>

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

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

子组件：

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

<script>
export default {
  props: ['message']
};
</script>

2. 子组件向父组件传递数据：使用 events
在子组件中，通过触发事件的方式将数据传递给父组件。父组件需要监听子组件触发的事件，并在事件处理函数中获取传递的数据。

子组件：

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