defineProps

组件之间传值

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


//子组件
const props = defineProps({
  val: {
    type: String,
    default: ""
  }
});

defineEmits

子组件向父组件事件传递

// 父组件
<template>
  <Child  @getdata="getdata"></Child>
</template>
<script>
   const getdata = (e: string) => {
     console.log(e);
   };
</script>

//子组件
import { defineEmits } from "vue"
<template>
  <button @click="handleClick">暴露</button>
</template>
<script>
   const emits = defineEmits(["getdata"]);
   const handleClick = () => {
     emits("getdata", "子组件向父组件传递数据");
   };
</script>

defineExpose

子组件暴露自己的属性

// 父组件
<template>
  <Child ref="childExpose"></Child>
  <button @click="handelcount">子组件暴露</button>
</template>
<script>
   const childExpose = ref();
   const handelcount = () => {
     console.log(childExpose.value.count);
   };
</script>

// 子组件
<script>
   defineExpose({
     count: 1
   })
</script>