做一个简单的vue3父子组件通信

在Vue3中，父子组件间的通信通常通过props（属性传递）和自定义事件（$emit/$on）来实现。以下是简单的例子：

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

<template>
  <div>
    <child-component :message="parentMessage" @newMessage="handleNewMessage"></child-component>
    <button @click="changeMessage">点击发送新消息</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const parentMessage = ref('Hello, Parent!');
function changeMessage() {
  parentMessage.value = '新的消息';
}
function handleNewMessage(newMessage) {
  console.log('收到子组件的消息:', newMessage);
}
</script>

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

<template>
  <div @input="updateParentMessage">
    <input type="text" v-model="localMessage" placeholder="请输入消息">
    <button @click="$emit('newMessage', localMessage)">发送</button>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';

function updateParentMessage(e) {
  this.$emit('newMessage', e.target.value); // 当输入框内容变化时，触发自定义事件并传递数据
}

onMounted(() => {
  // 父组件已经设置了一个初始值，可以在这里显示出来
  console.log('父组件传来的消息:', parentMessage.value);
});
</script>

在这个例子中，父组件通过`props`将变量`parentMessage`传递给子组件，并通过`@newMessage`监听子组件发出的`newMessage`事件。当用户在子组件输入框里输入并点击“发送”按钮时，会更新`parentMessage`并在父组件的日志中打印出新消息。