本文介紹了 vue中component組件的props使用詳解，分享給大家，具體如下：
props使用方法
Vue.component('my-component',{ props:['message'], template:'<div class="tem1">{{message}}</div>' }); <my-component message="hello"></my-component>注意：props 的聲明需要放在template的前面
props可以使用實例中的變量賦值
全局組件可以獲取用使用prop 的做操作
下面例子為message先先渲染為 "hello!!!" click點擊事件 調用zan方法為重新為comdata,message賦值
但是只有comdata顯示 不能影響message的值顯示
<div id="app"> <my-component v-bind:message='message'></my-component> </div> </body> <script> Vue.component('my-component',{ props:['message'], template:'<div v-on:click="zan">{{comdata}}<div>{{message}}</div></div>', data:function(){return {comdata:this.message}}, methods:{ zan:function(){ this.comdata=this.message+'vue'; this.message=this.message+'vue' } } }); var app=new Vue({ el:'#app', data:{message:'hello!!!'} }) </script> 
prop驗證
組件為props提供了驗證功能
props:{propName: { typpe:[Number,String,Boolean,Function,Array,Object]， default:function(){ return {name:'weng'} }, validator:function(value){ return value.length>3 } } } ps:type可以自定義 使用instanceof檢測
validator驗證需要在開發版本vuejs下在控制臺才會有輸出
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
