props defineProps(obj)

父组件在使用子组件时绑定属性，子组件通过defineProps函数来接收数据 defineProps函数接收一个对象类型的参数，对象内的属性可以是值类型，也可以是对象。

示例1

下方子组件代码中：msg为对象，num为值类型

父组件

<template>
  <div>
    <LocalComponent num=123 msg="hello world"/> 
  </div>
</template>
<script setup lang="ts">
import LocalComponent from "../components/component/LocalComponent.vue"
</script>

子组件

<template>
    <div>
       {{ msg }}*****{{ num }}
    </div>
</template>
<script lang="ts" setup>
const props = defineProps({
    msg:{
        type:String,
        default:'',
    },
    num:Number
});
</script>

示例2 defineProps结合泛型使用

父组件

<template>
  <div>
    <LocalComponent :user="user" /> 
  </div>
</template>
<script setup lang="ts">
import { reactive } from "vue"
import LocalComponent from "../components/component/LocalComponent.vue"

const user = reactive({
  name:'jack',
  age:111,
});

</script>

子组件

<template>
    <div>
       {{ user.age }}**{{ user.name }}
    </div>
</template>
<script lang="ts" setup>
interface IUser{
    name:string;
    age:number;
}
const props = defineProps<{user:IUser}>();//defineProps是一个函数，可以使用泛型
</script>

emits defineEmits(arr)

defineEmits接收一个数组，数组内是子组件注册的一系列事件，父组件可以监听这些事件。

示例1

子组件注册change事件

<template>
    <div>
       <button @click="onChange">子组件的按钮</button>
    </div>
</template>
<script lang="ts" setup>
const emit = defineEmits(['change']);
const onChange = () => {
    emit('change',100);
}
</script>

父组件监听change事件

<template>
  <div>
    {{ num }}
    <LocalComponent @change="handleChange"/> 
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue"
import LocalComponent from "../components/component/LocalComponent.vue"

const num = ref(0);
const handleChange = (n) => {
  num.value = n;
}
</script>

示例2 defineEmits与泛型结合

子组件

<template>
    <div>
       <button @click="onChange">按钮</button>
    </div>
</template>
<script lang="ts" setup>
interface IEvents {
    (e:'change',num:number):void;
}
const emit = defineEmits<IEvents>();
const onChange = () => {
    emit('change',123);
}
</script>

父组件

<template>
  <div>
    <LocalComponent @change="handleChange" /> 
  </div>
</template>
<script setup lang="ts">
import LocalComponent from "../components/component/LocalComponent.vue"

const handleChange = (n:number) => {
  alert(n);
}
</script>