vue中component組件的props使用詳解
更新時間：2017年09月04日 09:02:19 作者：v折耳
本篇文章主要介紹了vue中component組件的props使用詳解，這里整理了詳細的用法，具有一定的參考價值，有興趣的可以了解一下
本文介紹了 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點擊事件 調(diào)用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驗證需要在開發(fā)版本vuejs下在控制臺才會有輸出
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Vue項目從webpack3.x升級webpack4不完全指南
前段時間，泡面將自己的一個Vue-cli構(gòu)建的前端框架從webpack3.x升級到了4.x版本，現(xiàn)在才拉出來記錄一下，已備忘之用，也和大家分享一下,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了vue3項目如何使用prettier格式化代碼問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細介紹了vue.js表格分頁示例，ajax異步加載數(shù)據(jù)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
vue使用swiper實現(xiàn)中間大兩邊小的輪播圖效果
這篇文章主要介紹了vue使用swiper實現(xiàn)中間大兩邊小的輪播圖效果，本文分步驟通過實例代碼講解的非常詳細,需要的朋友可以參考下2019-11-11
vue版本升級相信大家應該都遇到過,下面這篇文章主要給大家介紹了關于Vue版本vue2.9.6升級到vue3.0的詳細步驟,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了element ui table 增加篩選的方法示例，詳細的介紹了如何添加規(guī)則內(nèi)容，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要介紹了Vue獲取DOM元素并修改屬性或者樣式，文中通過兩種方法給大家介紹了vue 如何獲取并操作DOM元素,需要的朋友可以參考下2022-10-10
vue.js與element-ui實現(xiàn)菜單樹形結(jié)構(gòu)的解決方法
本文通過實例給大家介紹了vue.js與element-ui實現(xiàn)菜單樹形結(jié)構(gòu)，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-04-04
vue3.0+element Plus實現(xiàn)頁面布局側(cè)邊欄菜單路由跳轉(zhuǎn)功能
這篇文章主要介紹了vue3.0+element Plus實現(xiàn)頁面布局，側(cè)邊欄菜單路由跳轉(zhuǎn),需要的朋友可以參考下2023-07-07
這篇文章主要為大家介紹了Vue3之元素和組件的動畫切換實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04