【备战春招】第六天+vue复习
Niklause 2023/2/14 8:13:29
学习课程:前端工程师2022版-vue基础入门
lesson15:组件间传值及传值校验1-3 组件间传值及传值校验-慕课网体系课 (imooc.com)
lesson16:单项数据流的理解1-4 单项数据流的理解-慕课网体系课 (imooc.com)
lesson17:Non-Props属性是什么1-5 Non-Props 属性是什么-慕课网体系课 (imooc.com)
讲师:Dell老师
今天继续昨天的课程安排,学习了组件间传值及传值校验、单项数据流是什么以及什么是Non-Props属性。
父组件调用子组件时,可以通过标签属性的形式给子组件传值。子组件内部通过props属性接收传过来的值。子组件接收值时,可以进行校验:type用来校验数据类型,default用来设置默认值,require用来设置必填。
其中支持的数据类型有:String, Boolean, Array, Object, Function, Symbol。
当父组件向子组件传递数据时,String类型值可以直接传递,其他类型值需要定义在data函数的返回值中通过
:属性名=“定义的变量名”进行传递。其中属性传的时候可以使用content-abc这种命名,子组件接的时候使用contentAbc这种命名。
单向数据流的概念:子组件可以使用父组件传递过来的数据,但是绝对不能修改传递过来的数据。
Non-props 属性:父组件给子组件传递内容的时候,子组件不通过props接收。此时vue底层会把传递过来的属性,放在子组件最外层元素上,将其变成子组件的一个属性。
如果父组件向子组件传值,子组件可以使用inheritAttrs用来设置是否继承父组件传递过来的Non-props属性。
如果子组件有多个根节点,可以使用v-bind="$attrs"使其中的某个节点接收父组件传递过来的属性。
继续加油!

关于找一找教程网
本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[【备战春招】第六天+vue复习]http://www.zyiz.net/tech/detail-396233.html
- 2023-03-22接口思维:如何使用 Context API 构建灵活、可维护的 React 组件-icode9专业技术文章分享
- 2023-03-22掌握 ReactJS Hooks:现代 Web 开发综合指南-icode9专业技术文章分享
- 2023-03-12热点面试题:Vue2、3 生命周期及作用?
- 2023-03-06【备战春招】第19天 新版 Node.js+Express+Koa2 开发Web Server博客 10-13
- 2023-02-14【备战春招】第6天 6-14 Vue3如何实现响应式
- 2023-02-14【备战春招】第6天 新版 Node.js+Express+Koa2 开发Web Server博客 8-8~8-9
- 2023-02-13【老卫拆书】009期:Vue+Node肩挑全栈!《Node.js+Express+MongoDB+Vue.js全栈开发实战》开箱
- 2023-02-13【备战春招】第5天 React零基础入门到实战,完成企业级项目简书网站开发——React基础篇
- 2023-02-13【备战春招】第5天 新版 Node.js+Express+Koa2 开发Web Server博客 8-6
- 2023-02-11【备战春招】第三天+vue复习