组件之间的传值及效验

组件之间的传值

一、父组件给子组件传值

第一步：

在父组件的模板上调用子组件，并在这个子组件的标签上定义一个自定义属性，让这个自定义属性等于一个父组件定义过的属性或变量，也就是你想要传递过去的数据项，

注意：这里你在定义传递过去的参数时注意是否需要动态获取，当加冒号，也就是v-bind：时，表示接收的是一个变量，如果是普通的字符串的话，就不需要加动态获取

template:`

父组件 

`,

data(){

  return{

  farnum:2,

}},

第二步：

在子组件上使用props方法进行数据接收，这个方法和定义的methods等为同级，这里接收的是自定义属性，现在这个属性可以直接在子组件中使用，如：{{fnum}}在页面渲染等等

data(){  return  {  sonnum:200  }  },props:['fnum'],

在props中对父元素传递过来的值进行效验

props可以是一个数组也可以是一个对象，主要看使用需求，当想要对接收的某个值进行效验或设置某些关卡时，你需要把这个自定义属性名写成一个对象类型，而非字符串，在这个对象当中有以下一些属性：

type 规定传过来的值是什么类型，如果不符合要求就会报错，当规定多个时，可以写成数组

default 设置默认值，当没有传递的时候，可以在这个属性里定义一个默认值

required:true 规定为必须传值，如果不传就报错

validator(val){ }自定义效验器，这里的形参可以接收到传递过来的值，这里我们可以对传过来的值进一步的设置条件，而传过来的值也必须符合这个条件

例子：

props:{  sum:{

type:[Number,String],//校验类型

default:'9999',//如果没有传递，使用默认值

required:true,//必传

validator(val){//自定义校验器

if(val.length<7){

thrownewError('输入的长度不够');}

returnval.length>7;//必须满足条件才行}}}

备注：如果type要求传递的是一个数组类型的，当需要设置默认值default，的时候就需要定义返回一个数组

props:{ mary:{

type:[Array],

default(){

return[4,5,6]  }}}

二、子组件给父组件传值

第一步：

在父组件模板调用子组件的时候，在子组件标签上添加自定义事件，并且绑定父组件的方法，这个方法里设一个形参用来接收传递过来的值

father:{template:`

father{{farnum}}

`,

data(){

return{

farnum:300,

}},

methods:{

add(val){

this.farnum*=val

}},

第二步：

在子组件中定义一个方法，用来触发this.$emit（）这个方法,去给父组件传值，在这个方法的括号中第一个形参是，在父组件上绑定的自定义事件名称，第二个是需要传递过去的值

son:{template:`

son点击翻倍

`,

data(){

return{

sonnum:2,

}},

methods:{

btn(){

this.$emit('myson',this.sonnum)

}}}