您好,登錄后才能下訂單哦!
本篇文章為大家展示了vue中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下在控制臺才會有輸出
上述內容就是vue中props如何使用,你們學到知識或技能了嗎?如果還想學到更多技能或者豐富自己的知識儲備,歡迎關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。