vue3 defineExpose，defineEmits，defineProps区别

故事的开始，发生在我刚看到这行代码的时候，眼前一黑，

这三个都涉及父子组件间的通信，

一：defineExpose用在子组件中，将子组件中的属性暴露出去，然后在父组件中使用ref得到。

//子组件
<template>
   <div> child </div>
</template>

<script setup>
const userId = ref('')
defineExpose({
  userId，
  show
});
</script>

//父组件
<template>
   <Child  ref='childRef'/>
</template>

<script setup>
import Child from '@components/child'
const childRef = ref('')
const handleId=()=>{
   //这里可以通过ref获取到子组件暴露出来的userId和show()方法
   childRef.value.userId='1'
   childRef.value.show()
}
</script>

二：defineEmits用在子组件中，将子组件方法传递给父组件。

//子组件
<template>
   <button> child </button>
</template>

<script setup>
const emit = defineEmits(['handleChild']);
const onConsole=()=>{
  emit('handleChild', 'this is child');
}
</script>

//父组件
<template>
   <Child  @handleChild="onFather" />
</template>

<script setup>
import Child from '@components/child'
const onFather=(val)=>{
   //这里val接收的是子组件传来的‘this is child’
   console.log(val)//this is child
}
</script>

三：defineProps用在子组件中，获取父组件变量

//子组件
<template>
   <button> child </button>
</template>

<script setup>
const props = defineProps({
  rowData: {
    type: Object,
    default: () => { },
  }
})
</script>

//父组件
<template>
   <Child  :rowData="rowData1" />
</template>

<script setup>
import Child from '@components/child'
const rowData1 = ref(null)
</script>

注意：这三个东西都是写在setup语法糖下的