vue setup props,vue3 setup 参数
1.setUp函数的第1个参数props
第一个参数props:
Props是一个包含由父组件传递给子组件的所有数据的对象。
使用道具接收子组件。
一个对象，包含配置声明和传入的所有属性。
也就是说，如果你想通过props的方式将父组件传递的值输出给子组件。
接收配置需要使用道具。也就是道具：{.}
如果不接受通过Props配置，输出值是未定义的【相关推荐：vue.js视频教程】
模板
差异
父组件
/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的讲解
第二个参数：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}
}
});
/script4。优化事件调度
我们知道第二个参数上下文是一个对象。
对象中有三个属性attrs、slots和emit。
事件分发的时候，直接用emit就可以了。
模板
div @click=sonHander
是我的子组件中的数据。
/div
/模板
脚本
从“vue”导入{ defineComponent，setup }；
导出默认定义组件({
姓名： NoCont ，
道具：{
我的头衔：{
类型：对象
}
},
设置(道具，{属性，插槽，发射}){
//直接使用emit调度事件。
函数sonHander(){
发出( sonclick ，子组件被传递到父组件)
}
return {sonHander}
}
});
/script5。获取父组件传递的值。
我们将使用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函数时需要注意几点：
设置功能的设置执行时间介于beforeCreate和created之间。因为设置执行时间在创建时间之间，所以组件刚刚创建，而数据和方法还没有初始化。因此，您不能在data和methodssetup中使用它来指向未定义的setup。只能同步，不能异步。以上是解释vue3中设置函数的参数-道具和上下文的详细内容。更多信息请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。