Vue props用法详解(小结)

2023-09-10 19:47:05 259

Vueprops用法详解

组件接受的选项之一props是Vue中非常重要的一个选项。父子组件的关系可以总结为：

propsdown,eventsup

父组件通过props向下传递数据给子组件；子组件通过events给父组件发送消息。

父子级组件

比如我们需要创建两个组件parent和child。需要保证每个组件可以在相对隔离的环境中书写，这样也能提高组件的可维护性。

这里我们先定义父子两个组件和一个Vue对象：

varchildNode={
template:`
childNode
`
};
varparentNode={
template:`




`,
components:{
child:childNode
}
};
newVue({
el:"#example",
components:{
parent:parentNode
}
});

这里的childNode定义的template是一个div，并且内容是"childNode"字符串。

而在parentNode的template中定义了div的class名叫parent并且包含了两个child组件。

如果大家想对VUE.JS有更加深入系统的学习，可以参阅Vue.js实战PDF高质量扫描版这本经典读物

静态props

组件实例的作用域是孤立的。这意味着不能（也不应该）在子组件的模板中直接饮用父组件的数据。要让子组件使用父组件的数据，需要通过子组件的props选项。

父组件向子组件传递数据分为两种方式：动态和静态，这里先介绍静态方式。

子组件要显示的用props声明它期望获得的数据

修改上例中的代码，给childNode添加一个props选项和需要的forChildMsg数据;

然后在父组件中的占位符添加特性的方式来传递数据。

varchildNode={
template:`

{{forChildMsg}}

`,
props:["for-child-msg"]
};
varparentNode={
template:`

parentNode



`,
components:{
child:childNode
}
};

命名规范

对于props声明的属性，在父组件的template模板中，属性名需要使用中划线写法；

子组件props属性声明时，使用小驼峰或者中划线写法都可以；而子组件的模板使用从父组件传来的变量时，需要使用对应的小驼峰写法。别担心，Vue能够正确识别出小驼峰和下划线命名法混用的变量，如这里的forChildMsg和for-child-msg是同一值。

动态props

在模板中，要动态地绑定父组件的数据到子组件模板的props，和绑定Html标签特性一样，使用v-bind绑定；

基于上述静态props的代码，这次只需要改动父组件：

varparentNode={
template:`

parentNode



`,
components:{
child:childNode
},
data:function(){
return{
childMsg1:"Dynamicpropsmsgforchild-1",
childMsg2:"Dynamicpropsmsgforchild-2"
};
}
};

在父组件的data的return数据中的childMsg1和childMsg2会被传入子组件中，

props验证

验证传入的props参数的数据规格，如果不符合数据规格，Vue会发出警告。

能判断的所有种类（也就是type值）有：String,Number,Boolean,Function,Object,Array,Symbol

Vue.component("example",{
props:{
//基础类型检测,null意味着任何类型都行
propA:Number,
//多种类型
propB:[String,Number],
//必传且是String
propC:{
type:String,
required:true
},
//数字有默认值
propD:{
type:Number,
default:101
},
//数组、默认值是一个工厂函数返回对象
propE:{
type:Object,
default:function(){
console.log("propEdefaultinvoked.");
return{message:"IamfrompropE."};
}
},
//自定义验证函数
propF:{
isValid:function(value){
returnvalue>100;
}
}
}
});
letchildNode={
template:"{{forChildMsg}}",
props:{
"for-child-msg":Number
}
};
letparentNode={
template:`

`, components:{ child:childNode }, data(){ return{ //当这里是字符串"123456"时会报错 msg:123456 }; } };

还可以在props定义的数据中加入自定义验证函数，当函数返回false时，输出警告。

比如我们把上述例子中的childNode的for-child-msg修改成一个对象，并包含一个名叫validator的函数，该命名是规定叫validator的，自定义函数名不会生效。

letchildNode={
template:"{{forChildMsg}}",
props:{
"for-child-msg":{
validator:function(value){
returnvalue>100;
}
}
}
};

在这里我们给for-child-msg变量设置了validator函数，并且要求传入的值必须大于100，否则报出警告。

单向数据流

props是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件五一修改父组件的状态。

所以不应该在子组件中修改props中的值，Vue会报出警告。

letchildNode={
template:`


子组件数据


{{forChildMsg}}

letchildNode={ template:`

子组件数据

ownChildMsg:{{ownChildMsg}}

`, props:{ "for-child-msg":String }, computed:{ ownChildMsg(){ returnthis.forChildMsg+"---ownChildMsg"; } } };

letchildNode={ template:`

子组件数据

ownChildMsg:{{ownChildMsg}}

`, props:{ "for-child-msg":String }, data(){ return{ ownChildMsg:this.forChildMsg }; }, watch:{ forChildMsg(){ this.ownChildMsg=this.forChildMsg; } } };

Vue props用法详解(小结)

热门推荐

随机推荐