故事的开始,发生在我刚看到这行代码的时候,眼前一黑,
这三个都涉及父子组件间的通信,
一: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语法糖下的