vue3 script-setup 语法糖父子组件通信使用defineEmit,defineProps,defineExpose (useContext 弃用)

最新推荐文章于 2024-08-03 23:58:49 发布

geinvse_seg

最新推荐文章于 2024-08-03 23:58:49 发布

阅读量913

点赞数

分类专栏：前端 html 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/geinvse_seg/article/details/123219307

版权

本文介绍了Vue3中新的`script-setup`语法糖，通过`defineEmit`, `defineProps`和`defineExpose`简化父子组件通信。详细阐述了子组件如何定义传出事件和接收属性，以及父组件如何使用这些事件和属性进行通信。同时提及`useContext`已被弃用。" 118341665,7351398,MySQL JOIN查询优化策略与算法解析,"['数据库', 'SQL', '查询优化', '数据库理论']

摘要由CSDN通过智能技术生成

官方地址
https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md#closed-by-default
新的写法
相比之下写法变得更加简化,下面具体看是否真香
子组件
在这里插入图片描述

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210623152824701.png
组件传值
父组件

在这里插入图片描述

下面上源码

//子组件
<template>
    <div>
        <div id="editorbox"></div>
        <el-button @click="getHtml">获取文本内容</el-button>
    </div>
</template>
<script setup lang='ts' >
import { ref, onMounted, defineEmits, defineProps, defineExpo