Vue组件参数校验与非Props特性

2019年3月11日23:05:15 发表评论 阅读(261)

组件参数校验指的是父组件向子组件进行参数传递,子组件有权对这个参数进行一些约束,我们一起来看一下实例

组件参数校验

  1. <div id="root">
  2.         <child content="hello world!"></child>//参数传递
  3.     </div>
  4.     <script>
  5.         Vue.component('child',{
  6.             props:['content'], //接收参数
  7.             template: '<div>{{content}}</div>' //接收后通过插值表达式使用content
  8.         })
  9.         var vm = new Vue({
  10.             el: "#root"
  11.         })
  12.     </script>

如果我们有这样一个需求,比如我们希望传递过来的参数是字符串类型的,那么我们可以这样写,只需要将上面代码的第7行改为:

  1. props: {
  2.     content: String
  3. }

意思是子组件接收到的content属性必须是一个字符串类型,那么如果内容不是字符串类型会怎样呢?我们可以试一下将上面代码的第2行改为:

  1. <child :content="123"></child>

然后我们会发现报错了,报错提示:

Vue组件参数校验与非Props特性

将第7行代码改为就不会报错了:

  1. props: {
  2.                 content: Number
  3.             }

如果我们想要同时满足两种情况呢?数字or字符串?要怎么写呢?可以这样写,将number和string放在一个数组里面

  1. props: {
  2.                 content: [ Number, String]
  3.             }

当然还有更复杂的约束,比如这样的:

  1. props: {
  2.                 content: {
  3.                     type: String, //约束传递的参数为string类型
  4.                     required: true,//content属性必须传,值为true时缺少content则会报错,反之不报错
  5.                     default: 'defaule value', //content属性不存在时,差值表达式content默认显示内容
  6.                     validator: function (value) {
  7.                         return (value.length > 5)  //传入的content值需要大于5,满足为true,不满足为false并且console报错
  8.                     }
  9.                 }
  10.             }

非props特性

什么是props特性?当父组件使用子组件的时候通过属性向子组件传递参数的时候,刚好子组件声明了对父组件传递属性的接收,因此就有了一个对应关系,我们称这种形式的属性为props特性。

什么是非props特性?有以下两点:

父组件向子组件传递数据,子组件没通过props接收

  1. <div id="root">
  2.         <child content="hello world!"></child>
  3.     </div>
  4.     <script>
  5.         Vue.component('child',{
  6.             template: '<div>{{content}}</div>' //接收后通过插值表达式使用content
  7.         })
  8.         var vm = new Vue({
  9.             el: "#root"
  10.         })
  11.     </script>

content属性展示在子组件最外层dom标签属性里面

  1. <div id="root">
  2.         <child content="hello world!"></child>
  3.     </div>
  4.     <script>
  5.         Vue.component('child',{
  6.             template: '<div>hello</div>'
  7.         })
  8.         var vm = new Vue({
  9.             el: "#root"
  10.         })
  11.     </script>

显示效果与代码结构:

Vue组件参数校验与非Props特性

 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
  • A+
所属分类:JS
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛