vue——props的两种常用方法

vue——props的两种常用方法

1、实现父——>子的通信

举例如下:

父组件 parent.vue


<children :channel="object1"></children>

子组件 children.vue


export default{

name:"children",

props:["channel"],

data(){

return{

newChannel:null

}

}

methods:{

func1(){

this.newChannel = this.channel;

}

}

}

父组件object1的值放在channel变量,然后传入给子组件。这样可以达到父子之间的通信


2、校验变量

还可以通过组件传入的值判断是否符合要求,如果不符合发出警告,例如:


props:{

blackFlag:{

type:Boolean,

default:false

},

options:{

type:object

},

propsA:{

validator(value){

return value > 10

} ,

default:11

}

}

type 就是校验的要求,可以是如下类型:

  1. string
  2. number
  3. function
  4. boolean
  5. object
  6. array
  7. symbol

(校验变量的以上内容来自官方文档)

举个项目中用到的例子:

通过一个变量来控制一个组件的黑白皮肤显示,当变量存在时组件显示黑皮肤,不存在则默认白皮肤


props:{
blackFlag:{
type:Boolean,
default:false
}
},
methods:{
func1(){
if(this.blackFlag){
//黑皮肤 do
}else{
//白皮肤 do
}
}
}

<Loading blackFlag></Loading>
上一篇:LOJ_2305_「NOI2017」游戏 _2-sat


下一篇:TypeScript学习指南第二章--接口(Interface)