簡(jiǎn)介
props和emits甥桂，即defineProps()和defineEmits()，這種通信方式的特點(diǎn)是單向傳遞
props ? 父向子傳值
在父組件中痒芝，可以直接通過(guò)自定義屬性的方式傳值
<!-- 父組件 -->
<script setup lang="ts">
import child from "./components/child.vue"
const message = "父組件向子組件傳遞的消息"
</script>
<template>
<child :message="message"></child>
</template>
在子組件中赃春，通過(guò)props接收父組件的值。注意：在組件模板中可以直接獲取defineProps中的值
<!-- 子組件 -->
<script setup lang="ts">
const props = defineProps({
message: {
default: "默認(rèn)值"
}
})
</script>
<template>
{{ message }}
</template>
emits ? 子向父?jìng)髦?/h1>
父組件中通過(guò)調(diào)用子組件中創(chuàng)建的事件匪凡，并通過(guò)函數(shù)接收子組件傳遞的值
<!-- 父組件 -->
<script setup lang="ts">
import { reactive } from "vue";
import child from "./components/child.vue"
const data = reactive({
res: ""
})
const handleClickTableRow = (parm: string) => {
console.log(parm)
data.res = parm
}
</script>
<template>
<child @clickTableRow="handleClickTableRow"></child>
<div>{{ data.res }}</div>
</template>
子組件可以直接通過(guò)$emit創(chuàng)建事件膊畴，并傳值。也可以通過(guò)創(chuàng)建自定義函數(shù)病游，在函數(shù)中調(diào)用emits傳值
注意：emits可以傳遞多個(gè)值
