vue.js 组件 之 prop 传递数据

为何需要prop

在一个父组件包含一个子组件时，父组件和子组件一般来说都需要沟通交流。且通常情况下，是父组件传递数据给特定的子组件，由特定的子组件负责特定的逻辑处理得出特定的值。父组件给子组件传递数据这一过程就是通过为子组件设置prop实现的。使用prop的另一个原因是每个组件的作用域都是相互独立的，即使是父级组件和子级组件的关系。所以就由prop承担起父级组件向子级组件传递数据这一重任。

prop需要提前声明

比如我们定义的组件需要通过a属性获得父组件传递的数据就必须像这样先声明

Vue.component("cpt",{
    template:"<div>{{messageByA}}</div>"
    ,prop:["a"]
});

<parentComponent>
<cpt a="a"></cpt>
</parentComponent>

输出为：

<parentComponent>
<div>a</div>
</parentComponent>

需要注意的是当我们在props数组中使用骆驼标记法，我们在书写html时必须使用短横线分隔标记法，就像这样

props:["someProp"]      //someProp骆驼标记法

<cpt some-prop="someValue"></cpt>       //some-prop短横线分隔标记法

给prop绑定静态值与动态值

绑定静态值

<cpt some-prop="db"></cpt>      //绑定静态值字符串"db"

绑定动态值

//#el为一个vue实例且data中设置了db属性
<div id="el">
<cpt :some-prop="db"></db>
</div>

绑定静态值时常常会认为这样是传递了数字

<cpt some-prop="5"></cpt>

其实是传递了字符串“5”，下面这种方式也是传递了字符串“5”

<cpt some-prop=5></cpt>

如果我们想传递一个数字5该怎么办呢？

<cpt :some-prop="5"></cpt>      //传递了数字5

为什么会这样呢？因为:some-prop是vue的指令，会将字符串里的作为表达式计算得到返回值，因此就为数字5
还有一种情况值得注意：

<div id="d"><db s=5></db></div>
<script>
    let d=new Vue({
        el:"#d"
        ,components:{
            db:{
                props:["s"]
                ,template:`<div>${s}</div>`
                //此处为模板字符串相当于"<div>"+s+"</div>"
            }
        }
    });
</script>

结果为页面上显示undefined。这是因为js运行到template那一行时，vue尚未实例化结束，其局部化定义的组件db也没有实例化完成，也就不要说去接收给db组件传递的s属性的值这一操作了,此时，s为undefined。
正确操作：

<div id="d"><db s=5></db></div>
<script>
    let d=new Vue({
        el:"#d"
        ,components:{
            db:{
                props:["s"]
                ,template:`<div>{{s}}</div>`
            }
        }
    });
</script>

这是操作步骤变为
1.vue实例和db组件实例化结束。
2.db组件接收储存字符串“5”作为s的值
3.<div id="d"><db s=1></db></div>变为<div id="d"><div>{{s}}</div></div>
4.计算s在db组件中查找s的值
5.最终结果为<div id="d"><div>5</div></div>

对prop值进一步操作

我们有些现对prop值进行进一步操作加工，可以通过computed来实现

props:["someProp"]
,computed:{
    key:function(){
        return someProp+1;//对someProp进行加一操作返回
    }
}

注意获取到的prop值如果为object（array也是object的一种），将保有对此对象的引用，对此对象进行更改会造成其他持有此对象的受到影响。

对传入的prop值进行验证

话不多说直接上代码

Vue.component("cpt",{
    template:...
    ,props:{
        p:{
            type:Object//此处为一构造函数，操作为p instanceOf 构造函数
            ,required:true/false//是否必须输入true为必须
            ,defalut:value/function//设置默认值可以为直接值也可以为返回值的函数
        }
    }
});

也可以这样写的简单点

props:{
    p:Object//直接些构造函数名，不要必须输入，输入的话会用instanceOf判断
    ,p1:[Object,Number]//多个构造函数，可以输入多个类型的值
}

也可以自定义检测函数

props:{
    p:{
        validate:fucntion(v){
            return v%2==0;//输入的值必须为偶数
        }
    }
}