vue3 props传值,vue3 父子组件传值
本文主要介绍vue3亲子组件的值传递中使用的道具细节的相关信息。通过示例代码非常详细，对你的学习或者工作有一定的参考价值。有需要的朋友可以参考一下。
目录
设置功能1的参数。当父组件想要将值传递给子组件时，可以通过props 2完成组件的通信。子组件将该值传递给父组件，并对其进行汇总。
setup函数的参数
它有两个主要参数：
第一个参数：props:父组件传递的属性会放在props对象中。第二个参数：context:包含三个属性。attrs:all non-prop attributes slots:父组件传递的插槽(这在作为渲染函数返回时会很有用，后面会讨论)。emit:当我们需要在组件内部发送事件时使用emit。
一、父组件要给子组件传值时，可以通过props来完成组件的通信
//父组件
模板
//通过自定义属性将数据传递给子组件
消息标题=父组件中的值/消息
/模板
//子组件
模板
//使用父组件传递的值
h2 {{title}} /h2
/模板
脚本
导出默认值{
//通过props接收父组件传递的数据，可以直接在模板中使用
道具：[title]，
设置(道具、上下文){
//如果要在设置函数中使用，就要接收。
控制台.日志(props.title)
}
/脚本
子组件中道具的两种常见用法
方法一：字符串数组。当父组件中引用子组件时，数组中的字符串是自定义属性的名称。
方法二：对象类型，我们可以指定它需要传递的类型，是否需要，默认值等。同时指定属性名。
细节一：props中属性可以指定的类型
StringNumberBooleanArrayObjectDateFunctionSymbol细节二：props中不同类型的写法
道具：{
//基本类型指定
普罗帕：数字，
//指定多个类型
propB:[字符串，数字]，
//指定所需的类型。
propC: {
类型：字符串，
必填：真
},
//带有默认值的数字
propD: {
类型：数量，
默认值：100
},
//具有默认值的对象
属性：{
类型：对象，
//对象或数组默认值必须从工厂函数中获取
默认(){
return { mes: lihua}
}
},
//自定义验证函数
propF: {
验证器(值){
返回[警告，成功]。包括(值)
}
},
//具有默认值的函数
项目：{
类型：功能，
默认(){
返回“默认函数”
}
}
}
细节：道具的案例命名
属性命名不推荐驼峰命名，但需要a-b(短横线分隔命名)。
二、子组件给父组件传值
父组件
//父组件
模板
//将自定义函数传递给子组件
message @add=addNum/message
/模板
脚本
导出默认值{
组件：{
消息
}
setup() {
const addNum=(value)={
//接收子组件传递的值
console.log(值)
}
//将导出方法提供给模板。
返回{
addNum
}
}
/脚本
组件
//子组件
模板
//使用父组件传递的值
按钮@click=增量/按钮
/模板
脚本
导出默认值{
//1.通过第二个参数上下文接收父组件传递的方法。
设置(道具、上下文){
常数增量=()={
//通过context.emit触发父组件的方法第二个参数是传递的参数，可以传递多个。
context.emit(add ，100)
context.emit(add ，100， aaa ， bbb )
}
//将导出方法提供给模板。
返回{
增量
}
}
//2.解构由的父组件传递的函数，通过第二个参数发出接收。
设置(道具，{ emit }) {
常数增量=()={
//通过emit触发父组件的方法，第二个参数是传递的参数，可以传递多个。
发出(添加，100)
发出(添加，100， aaa ， bbb )
}
返回{
增量
}
}
}
/脚本
总结
关于vue3亲子组件值传递所用道具的细节，本文到此为止。更多关于vue3亲子组件值传递的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。