vue3 setup 语法糖_语法糖的事件-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_59967951/article/details/123678819

本文详细介绍了Vue3中使用setup语法糖进行组件间通信的方法，包括父传子通过defineProps，子传父利用defineEmits，以及如何通过defineExpose将子组件属性暴露给父组件。

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

组件之间通信：父传子：使用defineProps

父组件：

import Student from './Student.vue'
import { ref,onMounted } from 'vue'
const schoolName = ref('xxx')

子组件

import { ref } from 'vue'
const props = defineProps({
  schoolName: {
    type: String,
    default: 'error'
  }
})

组件之间通信：子传父：使用defineEmits

在子组件中设置回调，在子组件中设置事件声明：

子组件

// 事件声明
const emit = defineEmits(['changeSchoolName'])
const changeName = (): void => {
  emit('changeSchoolName')
}

父组件

// 子传父，然后父再传给子
const changeName = (): void => {
  schoolName.value = 'good'
}

子组件暴露属性给父组件：defineExpose

子组件：

// 子组件中暴露属性，可以在父组件中通过ref来访问到
const studentName = ref('tom')
defineExpose({
  studentName,
  obj: {
    name: 'paul',
    age: 23
  }
})

父组件：

const studentRef = ref()
// 使用子组件的属性
onMounted(()=>{
  console.log(studentRef.value.studentName)
  console.log(studentRef.value.obj)
})

全部代码：

子组件：

<template>
  <div>Hello World</div>
  <p>我的学校的名字是：{{ schoolName }}</p>
  <hr />
  <p>我的学校改名了：{{}}</p>
  <button @click="changeName">点击改名</button>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const props = defineProps({
  schoolName: {
    type: String,
    default: 'error'
  }
})
// 事件声明
const emit = defineEmits(['changeSchoolName'])
const changeName = (): void => {
  emit('changeSchoolName','传递成功')
}

// 子组件中暴露属性，可以在父组件中通过ref来访问到
const studentName = ref('tom')
defineExpose({
  studentName,
  obj: {
    name: 'paul',
    age: 23
  }
})
</script>

<style></style>

父组件：

<template>
  <!-- 父传子 -->
  <student
    :schoolName="schoolName"
    @changeSchoolName="changeName"
    ref="studentRef"
  ></student>
</template>

<script lang="ts" setup>
import Student from './Student.vue'
import { ref,onMounted } from 'vue'
const schoolName = ref('xxx')
// 子传父，然后父再传给子
const changeName = (params:string): void => {
  console.log(params);
  
  schoolName.value = 'good'
}
const studentRef = ref()
// 使用子组件的属性
onMounted(()=>{
  console.log(studentRef.value.studentName)
  console.log(studentRef.value.obj)
})
</script>

<style></style>