vue——props的兩種經常使用方法

vue——props的兩種經常使用方法

一、實現父——>子的通訊

舉例以下：

父組件 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變量，而後傳入給子組件。這樣能夠達到父子之間的通訊

---

二、校驗變量

還能夠經過組件傳入的值判斷是否符合要求，若是不符合發出警告，例如：

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>