vue.js 组件 之 prop 传递数据

来源:互联网 发布:监听2121端口 编辑:程序博客网 时间:2024/05/19 22:02

为何需要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;//输入的值必须为偶数        }    }}
原创粉丝点击