vue——props的兩種常用方法 1、實現父—— 子的通信 舉例如下： 父組件 parent.vue <children :channel="object1" </children 子組件 children.vue export default{ name:"children", pr ...
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 就是校驗的要求，可以是如下類型：
- string
- number
- function
- boolean
- object
- array
- symbol
(校驗變數的以上內容來自官方文檔)
舉個項目中用到的例子：
通過一個變數來控制一個組件的黑白皮膚顯示，當變數存在時組件顯示黑皮膚，不存在則預設白皮膚
props:{
blackFlag:{
type:Boolean,
default:false
}
},
methods:{
func1(){
if(this.blackFlag){
//黑皮膚 do
}else{
//白皮膚 do
}
}
}
<Loading blackFlag></Loading>
