文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue3:setup的两个注意点详解

2024-04-02 19:55

关注

在vue2中

父组件传属性给子组件

在这里插入图片描述

子组件接收属性

在这里插入图片描述

在这里插入图片描述

如果没有接收,则需要在$attrs里才能收到,缺点是没有对类型作限制,以及使用的时候名字比较长

在这里插入图片描述

在这里插入图片描述

使用的时候名字比较长

在这里插入图片描述

vue2,父组件在子组件里使用插槽

在这里插入图片描述

在这里插入图片描述

打印插槽里的内容

在这里插入图片描述

如果父组件使用了子组件2个插槽

在这里插入图片描述

在这里插入图片描述

父组件在子组件使用具名插槽

在这里插入图片描述

在这里插入图片描述

在vue3中

setup的注意点

在这里插入图片描述

setup生命周期在beforecreated之前

在这里插入图片描述
在这里插入图片描述

setup可以拿到两个参数,props和context

给子组件传2个属性

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

打印context

在这里插入图片描述

在这里插入图片描述

context.attrs

与vue2类似,如果只声明部分,则剩下的在attrs属性里面

在这里插入图片描述

在这里插入图片描述

context.emit

给子组件添加监听事件

在这里插入图片描述

在这里插入图片描述

context.slot

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

如果传一个具名插槽

在这里插入图片描述

或者(推荐这种)

在这里插入图片描述

打印

在这里插入图片描述

如果传2个具名插槽

在这里插入图片描述

在这里插入图片描述

总结

在这里插入图片描述

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程网的更多内容!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯