Vue3组件通信：setup语法糖详解,-CSDN博客

本文介绍了Vue3中script标签的setup属性的使用，无需定义setup函数，组件可以直接在template中使用。通过defineProps定义props接收父组件传递的数据，defineEmits用于声明子组件将要触发的事件，而defineExpose则用来暴露子组件的属性给父组件。文中给出了父组件和子组件交互的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在script标签加setup属性

</script>

1.不用写setup函数，组件只需要引入不需要注册，属性和方法也不需要再返回，可以直接在template模板中使用。

2. setup语法糖中新增api
2.1 defineProps：子组件接收父组件中传来的props
2.2 defineEmits：子组件调用父组件中的方法
2.3 defineExpose：子组件暴露属性，可以在父组件中拿到

例：

父组件

<template>
  <div class="wrap">
    parent: {{ num }}
    <el-button type="primary" @click="addNum">num + 1</el-button>
    <childCom ref="childComRef" @on-change="changeNum" :num="num" />
  </div>
</template>

<script lang="ts" setup>
import childCom from './coms/childCom.vue'
import { ref } from 'vue'
import { ElButton } from 'element-plus'

const num = ref(1)
const childComRef = ref()

const changeNum = (val) => {
  num.value = val
}

const addNum = () => {
  num.value++
  console.log(childComRef.value.childData)
}
</script>

　　子组件

<template>
  <div class="wrap">
    child: {{ num }} <el-button type="primary" @click="setNum">set 6</el-button></div
  >
</template>

<script lang="ts" setup>
import { defineProps, defineEmits, defineExpose } from 'vue'
import { ElButton } from 'element-plus'

defineProps({
  // 接受父组件属性
  num: {
    type: Number,
    default: 0
  }
})

const emit = defineEmits(['on-change'])

const setNum = () => {
  emit('on-change', 6) // 触发父组件的方法
}
const childData = 666
//暴露子组件属性
defineExpose({
  childData
})
</script>

setup 语法糖