您现在的位置是：网站首页> 编程资料编程资料
vue props数据传递类型限制方式_vue.js_
2023-05-24
271人已围观
简介 vue props数据传递类型限制方式_vue.js_
vue props数据传递类型限制
1.第一种：不限制任何数据
props: ['test', 'test1'],
2.第二种：只限制数据类型
props: { test: String, test1: Number }, 3.第三种：限制数据类型 必要参 默认值
props: { test: { type: String, // 字符类型 required: true // 必要条件 }, test1: { type: Number, // 字符类型 default: 99 // 默认值 }, },Vue中的配置项props
功能：让组件接收外部传入的数据 向子组件传递数据
(1).传递数据（父组件传递数据）
< Student name="李四" :age="18" sex="女"/>
(2).接收数据（子组件接收数据）
第一种方式（只接收）
简单的声明接收
props:['name','sex','age']
第二种方式（限制类型）
接收的同时对数据进行类型限制
props:{ name:String, age:Number, sex:String } 第三种方式（限制类型、限制必要性、指定默认值）
接收数据的同时：进行类型数据限制+默认值+必要性的限制
props:{ name:{ type:String, //name的类型是字符串 required:true //name是必要的 }, age:{ type:Number, default:99 //默认值 }, sex:{ type:String, required:true } }备注：props是只读的，Vue底层会检测你对props的修改，如果进行了修改。就会发出警告，
若业务需求确实需要修改，那么请赋值props的内容到data中一份，然后去修改data中的数据
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- React memo减少重复渲染详解_React_
- vue中修改浏览器图标和名字的几种方式_vue.js_
- Vue选项之propsData传递数据方式_vue.js_
- JavaScript实现简单MD5加密的脚本分享_javascript技巧_
- vue解决Not allowed to load local resource问题的全过程_vue.js_
- 如何在vite初始化项目中安装scss以及scss的使用_vue.js_
- uniapp微信小程序强制更新解决示例详解_javascript技巧_
- js知识点总结之getComputedStyle的用法_javascript技巧_
- uniapp 使用定位示例详解_javascript技巧_
- 运行npm run dev报错的原因及解决_vue.js_
