vue setup props,vue3 setup函数
我们知道SetUp函数是复合API的核心入口函数。下面主要介绍Vue3中setup函数的参数props和上下文的相关信息。有需要的可以参考一下。
1.setUp函数的第1个参数props
设置(道具，上下文){}
第一个参数props:
Props是一个包含由父组件传递给子组件的所有数据的对象。
使用道具接收子组件。
一个对象，包含配置声明和传入的所有属性。
也就是说，如果你想通过props的方式将父组件传递的值输出给子组件。
接收配置需要使用道具。也就是道具：{.}
如果不通过Props接受配置，则输出值是未定义的。
模板
div class=box
父组件
/div
no-cont :mytitle=msg
Othertitle=其他人的头衔
@sonclick=sonclick
/否-续
/模板
脚本语言
从导入NoCont./components/NoCont.vue
导出默认值{
setup () {
让消息={
标题：“从父组件到子组件到子组件的数据”
}
函数sonclick(msss:string){
控制台.日志(msss)
}
返回{msg，sonclick}
},
组件：{
诺孔
}
}
/脚本
模板
div @click=sonHander
是我的子组件中的数据。
/div
/模板
脚本语言
从“vue”导入{ defineComponent，setup }；
导出默认定义组件({
姓名： NoCont ，
//不被接受
//道具：{
//mytitle:{
//类型：对象
//}
//},
设置(道具、上下文){
console.log(props==，props . my title)；//输出值未定义
函数sonHander(){
Context.emit(sonclick ，子组件被传递到父组件)
}
return {sonHander}
}
});
/脚本
为什么通过props.mytitle输出的值是未定义的？
因为我们没有用道具来接收配置。也就是
道具：{
我的头衔：{
类型：对象
}
},
如果我们增加上接受配置
2.参数context的讲解
第二个参数：上下文，是一个对象。
有attrs(获取当前标签所有属性的对象)。
但是这个属性是道具中没有声明接收的所有对象。
如果你使用道具来获取值，并且你在道具中声明了你想要获取的值。
那么：得到的值是未定义的。
注意：
Attrs获取不需要未在props中声明的收据的值。
第一个参数props获得的值需要在props中声明和接收。
有一个发出事件分布，(此事件是传递到父组件所必需的)
有槽。
模板
div @click=sonHander
是我的子组件中的数据。
/div
/模板
脚本语言
从“vue”导入{ defineComponent，setup }；
导出默认定义组件({
姓名： NoCont ，
道具：{
我的头衔：{
类型：对象
}
},
设置(道具、上下文){
//output {title:父组件传递的值}
console.log(props==，props . my title)；
//输出别人的标题[使用上下文获取值，不需要道具接受]
console.log(context==，context . attrs . other title)；
//output undefined，因为context不需要用props来接受。
console.log(contextmytitle==，context . attrs . my title)；
函数sonHander(){
Context.emit(sonclick ，子组件被传递到父组件)
}
return {sonHander}
}
});
/脚本
3.子组件将事件发送到父组件。
模板
div @click=sonHander
是我的子组件中的数据。
/div
/模板
脚本语言
从“vue”导入{ defineComponent，setup }；
导出默认定义组件({
姓名： NoCont ，
道具：{
我的头衔：{
类型：对象
}
},
设置(道具、上下文){
函数sonHander(){
Context.emit(sonclick ，子组件被传递到父组件)
}
return {sonHander}
}
});
/脚本
4.优化事件分布。
我们知道第二个参数上下文是一个对象。
对象中有三个属性attrs、slots和emit。
事件分发的时候，直接用emit就可以了。
模板
div @click=sonHander
是我的子组件中的数据。
/div
/模板
脚本语言
从“vue”导入{ defineComponent，setup }；
导出默认定义组件({
姓名： NoCont ，
道具：{
我的头衔：{
类型：对象
}
},
设置(道具，{属性，插槽，发射}){
//直接使用emit调度事件。
函数sonHander(){
发出( sonclick ，子组件被传递到父组件)
}
return {sonHander}
}
});
/脚本
5.获取父组件传递的值。
我们将使用props参数来获取值。
并使用属性获取值。
模板
人力资源/
H2组件/h2
div @click=sonHander
是我的子组件中的数据。
/div
H2用道具宣告收货=={{ mytitle }}/h2
使用h2参数attrs得到=={{ attrs.othertitle }}/h2。
/模板
脚本语言
从“vue”导入{ defineComponent，setup }；
导出默认定义组件({
姓名： NoCont ，
道具：{
我的头衔：{
类型：对象
}
},
设置(道具，{属性，插槽，发射}){
函数sonHander(){
发出( sonclick ，子组件被传递到父组件)
}
return {sonHander，attrs}
}
});
/脚本
附使用setup函数时需要注意几点：
设置功能的执行时间介于创建前和创建后之间
由于setup的执行时间在created之间，组件刚刚创建，数据和方法还没有初始化，所以数据和方法不能在setup中使用。
这在设置中指向未定义。
设置只能是同步的，不能是异步的。
总结
这就是这篇关于Vue3中SetUp函数的参数属性和上下文的文章。有关Vue3中设置功能参数的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。