defineProps：子组件接收父组件传来的
值
defineEmits：子组件接收父组件传来的方法
defineExpose：子组件暴露自己的属性或方法
defineProps、defineEmits
//父组件
<template>
<Tab
:page="page" //传递值
@pageFn="pageFn" //传递方法
></Tab>
</template>
<script setup>
import Tab from "../../components/freight/Tab.vue";
import { ref, reactive, toRefs, onMounted } from "vue";
const page=ref(1)
const pageFn=(val)=>{
page.value=val
}
</script>
//子组件
<template>
<button @click="butFn">改变page值:{{page}}</button>
</template>
<script setup>
import { ref, reactive, toRefs, defineProps, defineEmits } from "vue";
defineProps(["page"]); //接收父组件传来的值
const emit = defineEmits(["pageFn"]); //定义一个变量来接收父组件传来的方法
const butFn=()=>{
// 触发父组件中的 pageFn 方法，并传入参数5
emit("pageFn",5)
}
</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>
