vue3组件通信
父传子
defineProps()
在使用 <script setup> 的单文件组件中，props 可以使用 defineProps() 宏来声明：
//父
<HelloWorld msg="You did it!" />
<!-- 根据一个变量的值动态传入 -->
//<BlogPost :title="post.title" />
//子
<script setup>
//写法1
defineProps({
msg: {
type: String,
required: true
}
//或
// defineProps(['msg'])
//写法2
//const props = defineProps(['msg'])
//console.log(props.msg)
})
</script>
<template>
<h1 class="green">{{ msg }}</h1>
</template>
TypeScript 使用 <script setup>
<script setup lang="ts">
defineProps<{
title?: string
likes?: number
}>()
</script>props
在没有使用 <script setup> 的组件中，prop 可以使用 props 选项来声明：
export default {
props: ['foo'],
setup(props) {
// setup() 接收 props 作为第一个参数
console.log(props.foo)
}
}Prop 校验
defineProps({
// 基础类型检查
// （给出 `null` 和 `undefined` 值则会跳过任何类型检查）
propA: Number,
// 多种可能的类型
propB: [String, Number],
// 必传，且为 String 类型
propC: {
type: String,
required: true
},
// Number 类型的默认值
propD: {
type: Number,
default: 100
},
// 对象类型的默认值
propE: {
type: Object,
// 对象或数组的默认值
// 必须从一个工厂函数返回。
// 该函数接收组件所接收到的原始 prop 作为参数。
default(rawProps) {
return { message: 'hello' }
}
},
// 自定义类型校验函数
propF: {
validator(value) {
// The value must match one of these strings
return ['success', 'warning', 'danger'].includes(value)
}
},
// 函数类型的默认值
propG: {
type: Function,
// 不像对象或数组的默认，这不是一个
// 工厂函数。这会是一个用来作为默认值的函数
default() {
return 'Default function'
}
}
})