vue3语法糖夫传子

引用中的代码是Vue3中的子组件定义的示例，其中使用了Vue3的Composition API来定义子组件。在该示例中，子组件包含一个按钮，点击按钮时会通过`ctx.emit`方法将`message`的值传递给父组件。具体的代码如下所示：

<template>
  <div class="son">
    <h2>子组件</h2>
    <button @click="getMsessage">点我传值给父组件</button>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup(prop, ctx) {
    const message = ref("子组件的值--张三");

    function getMsessage() {
      console.log("进来了");
      ctx.emit("getMsessage", message);
    }

    return {
      message,
      getMsessage,
    };
  },
});
</script>

<style scoped>
.son {
  width: 200px;
  height: 100px;
  border: 1px solid green;
}
</style>

相比于Vue2的写法，在Vue3中使用Composition API的好处是可以将相关的代码逻辑放在一个函数内部，更加清晰和易于管理。在子组件中，我们通过`ref`函数创建了一个响应式的`message`变量，并定义了一个`getMsessage`方法来触发事件并将`message`的值传递给父组件。

另外，引用和引用中的代码也是Vue3中定义子组件的示例，只是写法略有不同。无论是哪种写法，都是为了实现子组件与父组件之间的数据传递和交互。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue3组件之间通信(二)——子传父属性和方法](https://blog.csdn.net/weixin_44784401/article/details/126198480)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]