setup 语法糖

最新推荐文章于 2023-01-17 23:15:10 发布

A small

最新推荐文章于 2023-01-17 23:15:10 发布

阅读量2k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/zjmxbd/article/details/121974363

版权

本文介绍了Vue.js中script setup语法糖的使用，包括接收props、声明事件、访问插槽和属性、导出子组件属性以及顶层await的处理。重点讲解了defineProps、defineEmit、useSlots、useAttrs和defineExpose在组件交互中的作用。

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

1.语法

<template>
	<Foo></Foo>
</template>
<script setup>
  //导入任意的组件就可以直接在 template 中使用
 import Foo from "./components/Foo"

</script>

2. defineProps 用来接收父组件传来的props defineEmit 用来声明触发的事件

//子组件 msg.vue
<template>
  <div>
    {
   {
    msg }}
    <button @click="onClick">点击按钮</button>
  </div>
</template>
<script setup>
  import {
    defineProps , defineEmits  } from 'vue'
  let props = defineProps({
   
 		 msg: String,
	});
	console.