我们在说vue props对象如何设置默认值的问题前,先来说说vue中props的基本作用。
props的作用
1.静态props
静态即传入的值不变化,直接在父组件中定义,子组件中使用
2.动态props
动态即传入的值会变化,父组件中要动态地绑定父组件的数据。
3.props验证
验证传入的props参数的数据规格,如果不符合数据规格则发出警告,注意这个数据类型包含所有的数据类型,如基本类型和引用类型;
还可以在验证中加入自定义验证函数,当返回false时则发出警告
3.单向数据流: props是单向绑定的
一般来说,当父组件的属性变化时,将传导给子组件,但是反过来不会。每次父组件更新时,子组件的所有 prop 都会更新为最新值。
下面我们具体来看看vue props对象如何设置默认值?
// 写法一:常规写法 props:['value'] //写法二:带有类型写法 props: { fieldString: String, fieldNumber: Number, fieldBoolean: Boolean, fieldArray: Array, fieldObject: Object, fieldFunction: Function } // 写法三:带有类型和默认值写法 props: { fieldString: { type: String, default: '' }, fieldNumber: { type: Number, default: 0 }, fieldBoolean: { type: Boolean, default: true }, fieldArray: { type: Array, default: () => [] }, fieldObject: { type: Object, default: () => ({}) }, fieldFunction: { type: Function, default: function () { } } }
通过以上内容我们知道了vue props对象如何设置默认值?。感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!