Vue props传递的类型和写法分享
作者:D_jing20
这篇文章主要介绍了Vue props传递的类型和写法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vue props传递的类型和写法
props常用属性
类型检查(规定数据类型)
类型检查(规定数据类型) | type | String 字符串 |
Number 数字 | ||
Boolean 布尔 | ||
Array 数组 | ||
Object 对象 | ||
Date 日期 | ||
Function 函数 | ||
Symbol 独一无二的值(es6) | ||
默认值 | default | default : (默认值),基础数据类型: 直接赋值,对象数据类型: 用函数赋值 ()=>[] |
必填项 | required | required: (必填项) ,默认为false,说明父级必须传入,否则会报错 |
校验 | validator | 验证传入的值是否符合规定 |
props语法
props: { prop1: [Boolean, Number], // 多个类型 prop2: { type: Number, // 数字 default: 100 // 默认值 }, prop3: { type: Boolean, // 布尔 required: true // 必填 }, prop4: { type: String, // 字符串 required: true }, prop5: { type: Array, // 数组 // 对象或数组默认值必须从一个工厂函数获取 default: () => [] }, prop6: { type: Object, // 对象 // 对象或数组默认值必须从一个工厂函数获取 default: function () { return { msg: 'hello' } } }, prop7: { type: String, validator: function (t) { // 自定义验证函数 return t === 'fade' || t === 'slide' // 这个值必须匹配下列字符串中的一个 }, defalut:'slide' } }
Vue props 传递函数
Props的type是函数
通过 props 传递 函数 看看有啥用。
// 父组件 </template> <div> <children :add='childrenClick'></children> <p>{{countF}}</p> </div> </template> <script> import children from './Children' export default { name: 'HelloWorld', data() { return { countF: 0, } }, methods: { childrenClick(c){ this.countF += c; } }, components:{ children, } } </script> // 子组件 <template> <div> <button @click="handClick(count)">点击加 1 </button> </div> </template> <script> export default { data() { return { count:1, } }, props:{ add:{ type: Function } }, methods: { handClick(){ this.add( ++this.count); // 父组件方法 } }, }
可以看到 chirden 组件在中 使用 props.add() , 调用的是 父组件的方法。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。