zoukankan      html  css  js  c++  java
  • Vue 从入门到进阶之路(九)

    之前的文章我们介绍了 vue 中父组件之间的传值,本章我们再来看一下父子组件间传值的参数校验和非 Props 特性。

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>vue</title>
     6     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     7 </head>
     8 <body>
     9 <div id="app">
    10     <child :title="123"></child>
    11 </div>
    12 <script>
    13     Vue.component("child", {
    14         props: ['title'],
    15         template: `
    16             <p>{{title}}</p>
    17        `
    18     });
    19     var app = new Vue({
    20         el: '#app',
    21         data: {
    22             title: "hello world"
    23         },
    24     })
    25 </script>
    26 </body>
    27 </html>

    上面的代码中我们我们在父组件中定义了一个 title 数据,并通过 :title="" 的形式将 title 数据传给子组件 child,然后子组件通过 props 属性接收该 title,通过 template 模板将 title 输出,结果如下:

    但是我们现在有这样一个需求,子组件想要校验父组件传过来的值,如果符合才显示,那么我们就可以通过 props 属性进行校验,在上面的代码中我们定义 props 为一个数组对象,其实我们可以将 props 定义为一个对象,如下:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>vue</title>
     6     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     7 </head>
     8 <body>
     9 <div id="app">
    10     <child :title="title"></child>
    11 </div>
    12 <script>
    13     Vue.component("child", {
    14         props: {
    15             title: Number
    16         },
    17         template: `
    18             <p>{{title}}</p>
    19        `
    20     });
    21     var app = new Vue({
    22         el: '#app',
    23         data: {
    24             title: "hello world"
    25         },
    26     })
    27 </script>
    28 </body>
    29 </html>

    在上面的代码我们将 props 改为了对象形式,并且定义 title: Number,意思是将 title 定义为一个 Number 类型,我们现在在页面上看一下结果:

    在控制台报错,意思说 tltle: "hello world" 是一个字符串,但我们在子组件定义为了一个 Number 类型,两者不符所以报错,所以我们可以将 props 下的 title 定义为 String 类型就可以了,当然我们也可以这样写 : title: [Number, String] ,意思是传入的 title 值既可以是 Number 类型也可以是 String 类型。

    在 props 下的数据我们还可以定义其他属性,如下:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>vue</title>
     6     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     7 </head>
     8 <body>
     9 <div id="app">
    10     <child :title="title"></child>
    11 </div>
    12 <script>
    13     Vue.component("child", {
    14         props: {
    15             title: {
    16                 type: [Number, String],
    17                 required: true,
    18                 default: "hi vue",
    19                 validator(value){
    20                     return value.length > 5
    21                 }
    22             },
    23         },
    24         template: `
    25             <p>{{title}}</p>
    26        `
    27     });
    28     var app = new Vue({
    29         el: '#app',
    30         data: {
    31             title: "hello world"
    32         },
    33     })
    34 </script>
    35 </body>
    36 </html>

    上面的代码中我们将 props 中的 title 定义为了一个对象,对象中

      type 表示验证父组件传入数据的类型,

      required 表示该值是否必须传入,false 表示可以不传入,true 表示必须传入,即 <child> 标签内是否写 :title="" 传入该值。

      default 表示传入该值的默认值,如果上面的 required 为 false 并且父组件并没有传入 title 值,我们可以自己定义 title 的值。

      validator 表示验证的方法,我们可以自己定义传入值的校验方法,如传入值的长度等。

    接下来我们说一下 props 特性和非 props 特性,在上面的代码中我们对父组件传过来的值都用 props 属性进行了接收,我们就可以把这个称为 props 特性,那它跟非 props 特性有什么区别的,非 props 特性就是我们不在 props 里接收父组件传过来的值,那么如果我们在子组件的 template 模板中使用该值,则会报错,同时非 props 特性会在 HTML 页面代码内暴露出传过来的值,即 title="",props 特性则不会,如下:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>vue</title>
     6     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     7 </head>
     8 <body>
     9 <div id="app">
    10     <child :title="title"></child>
    11 </div>
    12 <script>
    13     Vue.component("child", {
    14         props: {
    15             // title: {
    16             //     type: [Number, String],
    17             //     required: true,
    18             //     default: "hi vue",
    19             //     validator(value){
    20             //         return value.length > 5
    21             //     }
    22             // },
    23         },
    24         template: `
    25             <p>{{title}}</p>
    26        `
    27     });
    28     var app = new Vue({
    29         el: '#app',
    30         data: {
    31             title: "hello world"
    32         },
    33     })
    34 </script>
    35 </body>
    36 </html>

    我们在 props 中没有接收父组件传过来的 title 数据就在 template 模板中使用,则会在控制台报错,且在 HTML 代码中将 title: "hello word" 暴露在了标签内。props 特性接收 title 值的会就不会出现上面的情况。

    以上代码演示我们是基于引入开发环境的 js 来演示的,即

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    如果我们使用生产环境则不会出现上面的控制台警告报错,这是为了线上使用阅读者舒适的阅读,生产版本如下:

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

  • 相关阅读:
    yii 引入文件
    CodeForces 621C Wet Shark and Flowers
    面试题题解
    POJ 2251 Dungeon Master
    HDU 5935 Car(模拟)
    HDU 5938 Four Operations(暴力枚举)
    CodeForces 722C Destroying Array(并查集)
    HDU 5547 Sudoku(dfs)
    HDU 5583 Kingdom of Black and White(模拟)
    HDU 5512 Pagodas(等差数列)
  • 原文地址:https://www.cnblogs.com/weijiutao/p/10681964.html
Copyright © 2011-2022 走看看