您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
小编给大家分享一下VueJs组件中prop验证的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
组件
Vue.js引入的组件,让分解单一HTML到独立组件成为可能。组件可以自定义元素形式使用,或者使用原生元素但是以is特性做扩展。
vuejs中prop组件,主要作用是在传入数据的时候对传入的值做判断,写了个小例子。
<div id="app"> <my-child :num="100" :msg="'sdf'" :object="{a:'a'}" :cust="100" ></child> </div> <script type="text/javascript"> Vue.component('my-child', { props: { // 基础类型检测 (`null` 意思是任何类型都可以) num: Number, // 多种类型 propB: [String, Number], // 必传且是字符串 msg: { type: String, required: true }, // 数字,有默认值 num1: { type: Number, default: 1000 }, // 数组/对象的默认值应当由一个工厂函数返回 object: { type: Object, default: function () { return { message: 'hello' } } }, // 自定义验证函数 cust: { validator: function (value) { return value > 10 } } }, template: `<div> <p>{{ num }}</p> <p>{{ msg }}</p> <p>{{ num1 }}</p> <p>{{ object }}</p> <p>{{ cust }}</p> </div>` }) new Vue({ el: "#app" }); </script>
输出结果
这里都是通过验证了的,能够全部输出来,而且控制台没有报错。
如果有不符合的,控制台会报错。
<div id="app"> <my-child :num="asd" :msg="sdf" :object="{a:'a'}" :cust="100" ></child> </div>
对应的,也没有渲染出来
但是也有一些是报错了但是渲染出来的。比如
<div id="app"> <my-child :num="100" :msg="'sdf'" :object="{a:'a'}" :cust="1" ></child> </div>
以上是“VueJs组件中prop验证的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。