目录setup函数的参数一、父组件要给子组件传值时,可以通过props来完成组件的通信二、子组件给父组件传值总结setup函数的参数 它主要有两个参数: 第一个参数: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中属性可以指定的类型
细节二: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父子组件传值内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: vue3父子组件传值中props使用细节浅析
本文链接: https://www.lsjlt.com/news/142525.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0