它主要有两个参数：
// 父组件
<template>
// 通过自定义属性的方式给子组件传递数据
<message title="父组件中的值"></message>
</template>
// 子组件
<template>
// 使用父组件传递过来的值
<h2> {{title}} </h2>
</template>
<script>
export default {
// 通过props 接收父组件传递过来的数据,模板中可以直接使用
props: ['title'],
setup(props, context) {
// setup函数中要使用的话，要接收一下
console.log(props.title)
}
</script>
子组件中props两种常见的用法
方式一：字符串数组，数组中的字符串就是父组件中引用子组件时自定义attribute的名称
方式二：对象类型，我们可以在指定attribute名称的同时，指定它需要传递的类型，是否时必须的，默认值等
细节一：props中属性可以指定的类型
细节二：props中不同类型的写法
props: {
// 基础类型指定
propA: Number,
// 指定多个类型
propB: [String, Number],
// 指定必传类型
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default() {
return { mes: 'lihua'}
}
},
// 自定义验证函数
propF: {
validator(value) {
return ['warning', 'success'].includes(value)
}
},
// 具有默认值的函数
prorG: {
type: Function,
default() {
return 'default function'
}
}
}
细节三：Props的大小写命名
属性命名不推荐驼峰命名法法，需要用 a-b(短横线分隔命名)
父组件
//父组件
<template>
// 给子组件传递自定义函数
<message @add="addNum"></message>
</template>
<script>
export default {
components: {
message
}
setup() {
const addNum = (value) => {
// 接收子组件传递过来的值
console.log(value)
}
// 导出方法提供给模板使用
return {
addNum
}
}
</script>
子组件
//子组件
<template>
// 使用父组件传递过来的值
<button @click="increment"></button>
</template>
<script>
export default {
// 1. 通过第二个参数 context 接收父组件传递过来的方法
setup(props, context) {
const increment = () => {
// 通过 context.emit触发父组件的方法，第二个参数为传递的参数，可以传递多个
context.emit('add', 100)
context.emit('add', 100, 'aaa', 'bbb')
}
// 导出方法提供给模板使用
return {
increment
}
}
// 2. 通过第二个参数 解构 emits 接收父组件传递过来的函数
setup(props, { emit }) {
const increment = () => {
// 通过emit触发父组件的方法，第二个参数为传递的参数，可以传递多个
emit('add', 100)
emit('add', 100, 'aaa', 'bbb')
}
return {
increment
}
}
}
</script>
