vue3父子组件传值中props使用细节浅析
作者：前端.攻城狮
这篇文章主要给大家介绍了关于vue3父子组件传值中props使用细节的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
setup函数的参数
它主要有两个参数：
- 第一个参数：props ：父组件传递过来的属性会被放到props对象中
- 第二个参数：context：包含3个属性
- attrs：所有的非prop的attribute
- slots：父组件传递过来的插槽（这个在以渲染函数返回时会有作用，后面会讲到）
- emit：当我们组件内部需要发出事件时会用到emit
一、父组件要给子组件传值时，可以通过props来完成组件的通信
// 父组件
<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中属性可以指定的类型
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
细节二：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>
总结
到此这篇关于vue3父子组件传值中props使用细节的文章就介绍到这了,更多相关vue3父子组件传值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！