Vue3-子传父

1. 主组件 App.vue（父组件）

• 在 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 的事件名可以用连字符（-）来写，这是惯例，防止和其他属性混淆。

2. 子组件 son-com.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 就能输出子组件传来的信息，简直是一气呵成！

总结

1. 父组件的 @get-message="getMessage" 监听 get-message 事件，接收到消息就执行 getMessage。
2. 子组件的 emit('get-message', 'this is son message') 触发事件 get-message，并附上信息给父组件。
3. 所以整个过程就是：点击按钮 -> 子组件发消息 -> 父组件接收到消息并打印。

这样，父子组件就愉快地通过 get-message 事件“对话”了

完整代码：