发布时间:2023-09-07 13:00
它主要有两个参数:
- attrs:所有的非prop的attribute
- slots:父组件传递过来的插槽(这个在以渲染函数返回时会有作用,后面会讲到)
- emit:当我们组件内部需要发出事件时会用到emit
// 父组件
<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两种常见的用法
细节一: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>