vuejs 传参 向 子组件 父组件_Vue 组件&组件之间的通信 之 父组件向子组件传值...

父组件向子组件传值：父组件通过属性向下传值的方式和子组件通信；

使用步骤：

定义组件：现有自定义组件com-a、com-b，com-a是com-b的父组件；

准备获取数据：com-b要获取父组件data中的name属性；

在 使用v-bind 绑定name属性，红色部分为属性名称，可以随意写。

在子组件定义部分里添加选项，值是个字符串数组 props:[‘name’]，将上边红色的属性名称写在这里；

之后就可定义在子组件中使用name属性了；

现在就来解决上一篇博文提出的问题吧，让父组件与子组件进行通信：

vue代码：

父组件

username: {{name}}

---

子组件

fatherData: {{name}}

newVue({

components:{"father-component":{

data(){return{

name:'perfect'}

},

template:'#father-template',

components:{"child-component":{

template:'#child-template',

props:['name']

}

},

}

}

}).$mount('div');

由图可知子组件已经可以和父组件进行通信了，因为共用了属性name

现在我们就来测试一下调用父组件的多个属性，以及对属性值的绑定，可以进行观测数据的变化

该效果图的vue代码：

父组件

myData: {{name}},{{id}},{{user.username}}
fatherData: {{msg}}

---

子组件

fatherData: {{name}},{{id}},{{user.username}}

newVue({

data:{

msg:"欢迎来到perfect*的博客园!!!"},

components:{"father-component":{

data(){return{

id:1,

name:'perfect',

user:{

username:'博客园---perfect*',

password:'123123'}

}

},

props:['msg'],

template:'#father-template',

components:{"child-component":{

template:'#child-template',

props:['name','id','user']

}

},

}

}

}).$mount('div');

html:

father-component的父组件是body,由于属性msg是全局的，所以需要使用的时候，需要进行绑定

props选项高级配置

在上面的props的使用是字符串数组

props:['name','id','user']

props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。

对象的形式：

props:{

name:String,

id:Number,

user:Object

}

components:{"father-component":{

data(){return{

id:"01",

name:'perfect',

user:{

username:'博客园---perfect*',

password:'123123'}

}

},

结果虽然显示出来了，但是控制台报错误了，错误显示，id的类型检测错误，它是number类型，不是一个字符串类型

解决方法：

props:{

name:String,

id:[Number,String],

user:Object

}

在props中每一个属性都可以定义成对象的类型：

props:{

name:{

type:String,

required:true//必须进行传值

},

id:[Number,String],

user:Object

}

}

当把组件中的name删除时，会出现下面这样的错误：

解决方法：我们可以通过在name对象中定义一个属性default

props:{

name:{

type:String,//required:true,//必须进行传值

default:'perfect*'//定义一个默认值

},

id:[Number,String],

user:Object

}

}

},

这样控制台就没有错误了

接下来为user对象设置一个默认值

props:{

name:{

type:String,//required:true,//必须进行传值

default:'perfect*'//定义一个默认值

},

id:[Number,String],

user:{

type:Object,default:function(){return {username:'perfect***',password:'123123'}

}

}

}

}

},

数据校验

当定义一个属性age:18时，初始效果

校验demo:

props:{

name:{

type:String,//required:true,//必须进行传值

default:'perfect*'//定义一个默认值

},

id:[Number,String],

user:{

type:Object,default:function(){return {username:'perfect***',password:'123123'}

}

},

age:{

type:Number,

validator: function (value) {return value>=0;

}

}

}

}

},

当age=-18时：

会进行自动校验，见控制台：