defineProps,defineEmits,defineExport

<template>

<PropsEmitExport ref="propsEmitExportRef" :father="'标题'" @toFatherEmit="getChildData" @toFastherEmits="getChildDataTwo"></PropsEmitExport>

</template>

<script setup lang='ts'>

import PropsEmitExport from '../study/defineProps,defineEmit,defineExport/compontent.vue'

import { ref } from 'vue'

const getChildData = (data: string) => {

  console.log(data)

}

const getChildDataTwo = (data: string) => {

  console.log(data)

}

// 通过ref获取子组件的暴露的属性

const propsEmitExportRef = ref<InstanceType<typeof PropsEmitExport>>() // InstanceType是ts的一个内置类型,获取一个类的实例类型

console.log(propsEmitExportRef.value?.name); // 可以通过代码提示暴露的属性

</script>

<style lang="scss">

</style>

 

<template>

<div>

  <!-- {{ paops.father }} js语法 -->

  {{ father }} ts语法

</div>

<button @click="toFather">改变1</button>

<button @click="toFatherTwo">改变2</button>

</template>

<script setup lang='ts'>

// defineProps, defineEmits, defineExpose 在setup语法中不需要引入

//ts 带默认值的语法,不需要定义变量,直接解析

withDefaults(defineProps<{

father: string

}>(),{

  father: 'father'

})

// js语法,需要定义成变量,通过paops.father获取

// const paops = defineProps({

//   father: {

//     type: String,

//     default: 'father'

//   }

// })

// js语法

// const emit = defineEmits(['toFatherEmit', 'toFastherEmits'])

// ts语法

const emit = defineEmits<{

  (e: 'toFatherEmit', data: string): void

  (e: 'toFastherEmits', data: string): void

}>()

const toFather = () => {

  emit('toFatherEmit', '我是子组件传递的数据')

}

const toFatherTwo = () => {

  emit('toFastherEmits', '我是子组件传递的数据2')

}

// 暴露给父组件,父组件通过ref获取

defineExpose({

  name: 'PropsEmitExport'

})

</script>

<style scoped lang='scss'>

</style>