vue

Vue学习笔记（十一）之组件校验参数与非props特性

Posted by weite122 on 2018-08-31

组件参数校验

  • 当父组件向子组件传值的时候，子组件可以检验参数的类型，默认值，是否必须传值等。

  • 效果

  • 代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>组件参数校验与非props特性</title>
        <script src="http://vuejs.org/js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <child content="Hello World"></child>
            <child :content="123"></child>
        </div>
        <script>
            Vue.component('child', {
                props: {
                content: [Number, String] //这里规定了传值的数据类型是数字或者字符串
                },
                template: '<div>{{content}}</div>'
            })

            var vm = new Vue({
                el: '#root'
            })

        </script>
    </body>
    </html>

  • 假设现在我要传入一个对象。那么父组件必须要加入v-bind，不然传入的都是字符串。例如：

    1
    <child content="{'a':1}"></child>

  • 那么子组件的content肯定也要改成Object。我们除了用数组的写法，也可以用对象的写法校验content，例如：

    1
    2
    3
    4
    5
    content: {
        type: Object,
        required: false, //当值为true的时候表示必须传入参数
        default: 'default value' //当没有传入参数，content的默认值就是default的内容
    }

  • 第二种写法其实更好，推荐使用。如果用来传入字符串，也可以用第二种写法
    例如：http://js.jirengu.com/monab/1/edit

  • 除了以上校验方法，我们也可以通过validator自定义校验

    • 效果
    • 代码 
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>组件参数校验与非props特性</title>
          <script src="http://vuejs.org/js/vue.js"></script>
      </head>
      <body>
          <div id="root">
              <child content="Hello World"></child>
          </div>
          <script>
              Vue.component('child', {
                  props: {
                  content: {
                      type: String,
                      required: false,
                      default: 'default value',
                      validator : function (value) {
                          return value.length > 5
                      }//规定出入的参数长度必须大于5
                  }
                  },
                  template: '<div>{{content}}</div>'
              })

              var vm = new Vue({
                  el: '#root'
              })

          </script>
      </body>
      </html>

非props特性

  • Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。
  • 一个非 prop 特性是指传向一个组件，但是该组件并没有相应 prop 定义的特性。父组件传递的prop会显示在子组件最外层的template中。
  • 效果 ：
    • 深度截图_选择区域_20180905040627.png
  • 代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>组件参数校验与非props特性</title>
        <script src="http://vuejs.org/js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <child content="Hello World"></child>
        </div>
        <script>
            Vue.component('child', {
                template: '<div>{{content}}</div>'
            })

            var vm = new Vue({
                el: '#root'
            })

        </script>
    </body>
    </html>
FEATURED TAGS
vue
FRIENDS