怎么在Vue中使用道具方法 - 行业资讯 - 肥雀云

　　介绍

本篇文章为大家展示了怎么在Vue中使用道具方法,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

<强> Vue道具用法详解

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

<代码>道具,活动了

父组件通过道具向下传递数据给子组件;子组件通过事件给父组件发送消息。

<强>父子级组件

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

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

这里的childNode定义的模板是一个div,并且内容是“childNode"字符串。

而在parentNode的模板中定义了div的类名叫父母并且包含了两个子组件。

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

<强>静态道具

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

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

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

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

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

　　,,& lt; child for-child-msg=癮aa"祝辞& lt;/child> 　　,,& lt; child for-child-msg=癰bb"祝辞& lt;/child> 　　& lt;才能/div> 　　”,才能　　,组件:{ 　　,孩子:childNode 　　,} 　　};

<>强命名规范

对于道具声明的属性,在父组件的模板模板中,属性名需要使用中划线写法;

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

<强>动态道具

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

基于上述静态道具的代码,这次只需要改动父组件:

var parentNode =, { 　　模板:大敌;” 　　& lt;才能div> 　　,,& lt; p> parentNode

　　,,& lt; child : for-child-msg=癱hildMsg1"祝辞& lt;/child> 　　,,& lt; child : for-child-msg=癱hildMsg2"祝辞& lt;/child> 　　& lt;才能/div> 　　”,才能　　,组件:{ 　　,孩子:childNode 　　}, 　　,数据:函数(),{ 　　,return { 　　childMsg1才能:“Dynamic props msg for child-1" 　　childMsg2才能:“Dynamic props msg for child-2" 　　,}; 　　,} 　　};

在父组件的数据的返回数据中的childMsg1和childMsg2会被传入子组件中,

<强>道具验证

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

能判断的所有种类(也就是类型值)有:字符串、数字、布尔值、函数、对象、数组,符号

Vue.component (“example",, { 　　,道具:{ 　　,//基础类型检测,,空意味着任何类型都行　　,propA:数字, 　　,//多种类型　　,propB:字符串,,, 　　,//必传且是字符串　　,propC: { 　　,,类型:字符串, 　　要求:才能成立　　}, 　　,//数字有默认值　　,propD: { 　　类型:才能,号码, 　　,,默认值:101 　　}, 　　,//数组,默认值是一个工厂函数返回对象　　,propE: { 　　类型:才能,对象, 　　,,默认值:函数(),{ 　　console.log才能(“propE default 调用!”); 　　return 才能,{,信息:“小姐:am 得到propE干净,}; 　　,,} 　　}, 　　,//自定义验证函数　　,propF: { 　　,,isValid:功能(价值),{ 　　return 才能;value 祝辞,100; 　　,,} 　　,} 　　,} 　　}); 　　let childNode =, { 　　,模板:“& lt; div> {{forChildMsg}} & lt;/div>“ 　　,道具:{ 　　,“for-child-msg":数量　　,} 　　}; 　　let parentNode =, { 　　模板:大敌;” 　　,,& lt; div 类=皃arent"比; 　　,,& lt; child : for-child-msg=癿sg"祝辞& lt;/child> 　　,,& lt;/div> 　　”,才能　　,组件:{ 　　,孩子:childNode 　　}, 　　,数据(){ 　　,return {//才能,当这里是字符串,“123456“时会报的错　　味精才能:123456 　　,}; 　　,} 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null