vue3 写一个有父子组件的代码

在Vue3中，父子组件通信是非常常见的场景，通过props、自定义事件或Vuex状态管理来传递数据。下面是一个简单的父子组件示例，展示了如何创建一个父组件向子组件传值以及子组件触发事件的例子：

**父组件（ParentComponent.vue）:**

<template>
  <div>
    <input v-model="parentValue" placeholder="请输入">
    <ChildComponent :value="parentValue" @childEvent="handleChildEvent"/>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentValue: '',
    };
  },
  methods: {
    handleChildEvent(value) {
      console.log('子组件传递过来的值:', value);
    },
  },
};
</script>

在这个例子中，`parentValue`是父组件的数据，通过`v-model`双向绑定了输入框的值，并作为prop传递给子组件。

**子组件（ChildComponent.vue）:**

<template>
  <button @click="emitValue">点击发送到父组件</button>
</template>

<script>
export default {
  props: ['value'],
  methods: {
    emitValue() {
      this.$emit('childEvent', this.value);
    },
  },
};
</script>

子组件接收`value` prop，当按钮被点击时，它会触发`childEvent`自定义事件，并将自身的值传递给父组件。