28-1 父组件传递数据给子组件 — props基本用法

2024-01-02 20:00:34

在组件中，使用选项props来声明需要从父级接收到的数据。

props的值有两种方式：

方式一：字符串数组，数组中的字符串就是传递时的名称。

方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。

换句简单的话来说：父组件传递的方式分两种，第一种是用字符串数组来传，第二种是通过对象的形式来传，针对这两个以下写出详细：

符串数组来传：

<!--新建模板-->
<template id="cpm">
    <div>
        <p>{{info}}</p>
    </div>
</template>


<div id="app">
<child  :info = "infos"></child>
</div>


<script src="js/vue.js"></script>

<script>
    //我们说过 这个Vue实例 相当于Root根组件，所以在这里充当child的父组件。
    const app = new Vue({
        el:"#app",
        data:{
            infos:"Hello，World！"
        },
        components:{
            ‘child‘:{
                template:‘#cpm‘,
                props:[‘info‘]
            }
        }
    })
</script>

其中，你注意一下info 和 infos 的调用位置以及为什么要用v-bind 你就即可发现他的传递思维了。这很重要！然后下面是一张关于父组件传递数据给子组件数据的过程图：

TIPS ：这里的父组件给Vue实例当了，如果不是Vue实例充当父组件的话，那么data记得是函数，返回数组即可。

要慢慢消化，不急。

方式二：传递对象

除了数组之外，我们也可以使用对象，当需要对props 进行类型等验证时，就需要对象写法了。

首先他很多写法，例如：

<!--新建模板-->
<template id="cpm">
    <div>
        <p>{{props}}</p>
    </div>
</template>


<div id="app">
<child :props="infos"></child>
</div>


<script src="js/vue.js"></script>

<script>
    //我们说过 这个Vue实例 相当于Root根组件，所以在这里充当child的父组件。
    const app = new Vue({
        el:"#app",
        data:{
            infos:"Hello，World！"
        },
        components:{
            ‘child‘:{
                template:‘#cpm‘,
                props:{
                    props:String　　//这个props别混淆 应该写propa比较好分的。。。。
                }
            }
        }
    })
</script>

其中你可以看到，这里的props是直接一个String ，这个是简写的写法，他代表这类型，这样的类型有那么几种：

?String ?Number ?Boolean ?Array ?Object ?Date ?Function ?Symbol

其中当你直接写类型的时候，这个默认属性就是Type，Type这个属性是写类型进去的。

三种属性：

1.type　　这个属性指定类型，当给的类型不匹配时，会报错，可以指定多类型，用数组的方法写即可。【后面有图示例】

2.default　　这个是指默认值，当你的props没赋值的时候，默认值就会自动填充。但是如果类型是对象或数组(Array) 的话，这个default必须是一个函数。

3.required　　这个属性是指是否必须传值，布尔型，如果是true，即必须传值给props，不然报错。

下面代码演示这三个属性，更多写法最后图中给出：

这里类型以数组（Array）为例：【别烦认真看我学的时候奔溃了】

<!--新建模板-->
<template id="cpm">
    <div>
       <ul>
           <li v-for="item in propa">{{item}}</li>
       </ul>
    </div>
</template>


<div id="app">
<child></child>
</div>


<script src="js/vue.js"></script>

<script>
    //我们说过 这个Vue实例 相当于Root根组件，所以在这里充当child的父组件。
    const app = new Vue({
        el:"#app",
        data:{
            infos:[‘BiHu‘,‘很烦很烦‘,‘没有动力‘,‘很烦..很烦..‘]
        },
        components:{
            ‘child‘:{
                template:‘#cpm‘,
                props:{
                    propa:{
                        type:Array,
                        default(){
                            return [‘如果‘,‘你！‘,‘不赋值‘,‘的话‘,‘你就看到‘,‘这行字了！‘]
                        },
                        required:true
                    }
                }
            }
        }
    })
</script>