Vue3 defineProps、defineEmits、defineExpose 的作用

这几个属性都是在 <script setup> 方式时使用。

defineProps - 组件之间传值

// 父组件
<template>
  <Child :val="val"></Child>
</template>

// 子组件
<script setup>
import { defineEmits } from "vue"
const props = defineProps({
  val: {
    type: String,
    default: ""
  }
})
</script>

defineEmits - 子组件向父组件事件传递

// 父组件
<template>
 <Child  @success="success"></Child>
</template>
<script setup>
function success (e) {
  console.log(e)
}
</script>

//子组件
<template>
 <button @click="handleClick">点击按钮</button>
</template>
<script setup>
import { defineEmits } from "vue"
const emits = defineEmits(['success'])
function handleClick () {
  emits("success", "子组件向父组件传递数据")
}
</script>

defineExpose - 子组件暴露自己的属性或方法

// 父组件
<template>
  <Child ref="RefChildExpose"></Child>
  <button @click="touchButton">点击使用子组件</button>
</template>
<script setup>
const RefChildExpose = ref(null)
function touchButton () {
  // 使用子组件方法
  RefChildExpose.value.show()
  // 输出子组件属性
  console.log(RefChildExpose.value.count)
}
</script>

// 子组件
<script setup>
import { defineExpose } from "vue"
function show () {
  console.log('显示')
}
defineExpose({
  show,
  count: 1
})
</script>