defineProps

作用：父组件向子组件传值，子组件通过defineProps接收该值。

//父组件index.vue
<template>
    <div>parent</div>
    <son :value1="toSonValue" :method1="toSonMethod" />   //声明变量value1，绑定父组件的变量名toSonValue
</template>
    
<script setup lang='ts'>
import { ref } from 'vue';
import son from './son.vue';            
const toSonValue = ref('toSonValue');   
const toSonMethod = () => {             
    console.log('toSonMethod');
}
</script>

//子组件son.vue
<template>
    <div>son</div>
    <div>{{ value1 }}</div>
</template>
    
<script setup lang='ts'>
import { onMounted } from 'vue';

// 父组件往子组件传值value1,method1,其中method1是可选的
const props = defineProps<{      //子组件通过defineProps接收父组件传过来的value1和method1
    value1: string,              
    method1?: () => void         //可选的
}>()
onMounted(() => {
    props.method1!(); // toSonMethod
})
</script>

defineProps步骤：

1.新增一个子组件son.vue

2.在父组件通过import son from './son.vue'; 引入子组件

3.在父组件中声明变量toSonValue和toSonMethod

4.在父组件引入的子组件标签中，声明变量value1、method1，来绑定父组件toSonValue、toSonMethod两个变量名

5.在子组件中，声明变量props，该变量通过defineProps接收父组件传过来的value1和method1

defineEmits

作用：子组件向父组件传值，通过defineEmits触发父组件的自定义事件进行传值。

//子组件son.vue
<template>
    <div @click="sonClick">son</div>    //1.对son进行事件绑定
</template>
<script setup lang='ts'>
// defineEmits 定义子组件的自定义事件,及参数
const emit = defineEmits<{             //3.emit函数通过defineEmits 定义子组件的事件名和参数类型去触发父组件的自定义事件getSonValue
    (e: 'sonSelfEvent', sonValue: string): void    //返回一个void类型的数据
}>()
const sonClick = () => {                //2.当点击son，将会执行sonClick()
    emit('sonSelfEvent', 'sonValue')    //此处是自定义的事件名及参数
}
</script>

//父组件index.vue
<template>
    <div>parent</div>
    <son @son-self-event="getSonValue" />    //对父组件自定义的getSonValue()进行事件绑定
</template>
    
<script setup lang='ts'>
import son from './son.vue';
const getSonValue = (value: string) => {   //4.触发父组件的自定义事件getSonValue
    console.log(value); // sonValue        //接收子组件传过来的value值并将它打印出来
}
</script>

defineEmits步骤：

1.新增一个子组件son.vue

2.在父组件通过import son from './son.vue'; 引入子组件

3.在父组件中声明自定义事件getSonValue

4.在父组件引入的子组件标签中，声明变量son-self-event，来绑定父组件自定义的getSonValue()方法

5.在子组件中，声明变量emit，该变量通过defineEmits定义子组件的事件名和参数类型去触发父组件的自定义事件getSonValue（即：defineEmits接收父组件传过来的getSonValue()方法）

6.在子组件中，声明sonClick方法对son进行事件绑定

7.当点击son，将会执行sonClick方法里，emit函数自定义的事件名及参数

注意：在Vue3中不需要对defineProps、defineEmits进行引入，直接使用即可。

Vue3—组件传值defineProps、defineEmits

defineProps

defineEmits