Vue3-子传父

在 App.vue 中，我们先引入了子组件 SonCom，这个小家伙将在父组件中出场。
接着，我们写了一个叫 getMessage 的函数。这个函数的任务很简单——接收子组件传来的消息，然后用 console.log 把它打印出来。它就像一个侦听器，专门接收并显示子组件的情报。
```
const getMessage = (msg) => {console.log(msg)
}
```
然后我们在模板里使用了 <SonCom />，并且绑定了一个事件 @get-message="getMessage"。
```
<SonCom @get-message="getMessage" />
```
- 这里的 @get-message="getMessage" 是关键！意思是：“嘿，SonCom，一旦你触发 get-message 这个事件，我就会跑 getMessage 函数！”
- 注意这个事件名 get-message。Vue 的事件名可以用连字符（-）来写，这是惯例，防止和其他属性混淆。

在子组件 SonCom 里，我们定义了一个 emit 对象，这个对象通过 defineEmits 创建，用来发送（emit）事件给父组件。这里指定了一个事件名 get-message，就是父组件绑定的那个。
```
const emit = defineEmits(["get-message"])
```
还定义了一个叫 sendMsg 的函数。这个函数干啥呢？就是专门用来“发消息”的。
- 当你调用 sendMsg 时，它会通过 emit 触发 get-message 事件，并且带上一条信息 'this is son message'。这条信息就会跑到父组件 App.vue 里的 getMessage 函数中。
```
const sendMsg = () => {emit('get-message', 'this is son message')
}
```
最后在模板里，放了一个按钮：
```
<button @click="sendMsg">触发自定义事件</button>
```
- 这个按钮的功能就是当你点击它时，执行 sendMsg 函数，触发 get-message 事件，把消息传递给父组件。
- 点击一下，父组件的 console.log 就能输出子组件传来的信息，简直是一气呵成！