--- highlight: atom-one-dark theme: juejin --- >一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，[点击查看活动详情](https://juejin.cn/post/7080800226365145118 "https://juejin.cn/post/7080800226365145118") > 哈喽,大家好我是`xy`👨🏻‍💻。在之前的文章中，给大家详细讲解了[如何快速使用 vue3.x，typeScript， vite 搭建一套企业级的开发脚手架](https://juejin.cn/post/7036745610954801166)；其中也提到了` ``` ## 响应式响应式状态需要明确使用`响应式 APIs` 来创建。和从 setup() 函数中返回值一样，ref 值在模板中使用的时候会自动解包： ```html ``` 更多响应式 APIs 的使用请查阅官方文档：`https://v3.cn.vuejs.org/api/basic-reactivity.html#reactive`,本文就不做一一讲解。 ## 动态组件在 `setup script` 中要使用动态组件的时候，用动态的 `:is` 来绑定： ```html ``` 效果如下： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/61444e1b325043b89fb993466353016a~tplv-k3u1fbpfcp-zoom-1.image) ## 组件数据传递(props 和 emits) 在 ` ``` ### 定义组件的 emits 使用`defineEmit`定义当前组件含有的`事件`，并通过返回的上下文去执行 emit。示例： ```html ``` 父组件： ```html ``` 子组件： ```html ``` 效果如下： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/98bd89578c1141728e2d4aaba068504e~tplv-k3u1fbpfcp-zoom-1.image) ### 对外暴露属性(defineExpose) ` ``` 子组件： ```html ``` 效果如下： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/762eb018c6da417f9fccba6193ac8bc8~tplv-k3u1fbpfcp-zoom-1.image) > ⭐️ 注意： `defineProps`、`defineEmits`、`defineEmits` API 不需要引入可以直接使用 ## 获取 slots 和 attrs > 注：`useContext` API 被弃用，取而代之的是更加细分的 api: `useSlots` 和 `useAttrs`。在 ` ``` `useSlots` 和 `useAttrs` 是真实的运行时函数，它会返回与 `setupContext.slots` 和 `setupContext.attrs` 等价的值，同样也能在普通的组合式 `API` 中使用 ## 创建异步 setup 方法(顶层 await) ` ``` 这样setup()函数将是异步的。 [](https://v3.cn.vuejs.org/api/sfc-script-setup.html#%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95。 "script setup 官方文档") ## 写在最后大家好，我是一名前端🤫爱好：瞎折腾如果你也是一名瞎折腾的前端欢迎加我微信交流哦... [🤫一定要点我](https://juejin.cn/pin/7040966241468547109 "https://juejin.cn/pin/7040966241468547109")