快捷導(dǎo)航

vue中component組件的props使用詳解

更新時(shí)間：2017年09月04日 09:02:19 作者：v折耳

本篇文章主要介紹了vue中component組件的props使用詳解，這里整理了詳細(xì)的用法，具有一定的參考價(jià)值，有興趣的可以了解一下

本文介紹了 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可以使用實(shí)例中的變量賦值

全局組件可以獲取用使用prop 的做操作

下面例子為message先先渲染為 "hello!!!" click點(diǎn)擊事件調(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驗(yàn)證

組件為props提供了驗(yàn)證功能

props:{propName: 
  { 
    typpe:[Number,String,Boolean,Function,Array,Object]， 
    default:function(){ 
      return {name:'weng'} 
    }, 
    validator:function(value){ 
      return value.length>3 
    } 
  } 
   
}

ps:type可以自定義使用instanceof檢測(cè)

validator驗(yàn)證需要在開發(fā)版本vuejs下在控制臺(tái)才會(huì)有輸出

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue
props

相關(guān)文章

vue中(el-button的五種類型,三種css格式)
這篇文章主要介紹了vue中(el-button的五種類型，三種css格式)具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
vue+axios實(shí)現(xiàn)圖片上傳識(shí)別人臉的示例代碼
本文主要介紹了vue+axios實(shí)現(xiàn)圖片上傳識(shí)別人臉，這里采用的是vant的文件上傳組件，通過上傳圖片后端識(shí)別圖片里的人臉，感興趣的可以了解一下
2021-11-11
vue使用jsencrypt實(shí)現(xiàn)rsa前端加密的操作代碼
這篇文章主要介紹了vue使用jsencrypt實(shí)現(xiàn)rsa前端加密,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-09-09
解決‘vue-cli-service‘不是內(nèi)部或外部命令,也不是可運(yùn)行的程序問題
遇到'vue-cli-service'不是內(nèi)部或外部命令的錯(cuò)誤通常因?yàn)閂ueCLI未正確安裝或配置,解決步驟包括確保VueCLI全局安裝、檢查項(xiàng)目依賴、安裝項(xiàng)目依賴、清理并重新安裝依賴以及使用npm腳本調(diào)用vue-cli-service,按步驟操作后應(yīng)能解決問題
2024-11-11
vue2中使用AntV?以g2plot為實(shí)例
這篇文章主要介紹了vue2中使用AntV?以g2plot為實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue項(xiàng)目中條件加載組件導(dǎo)致CSS樣式丟失問題的解決方案
在 Vue + Vite 項(xiàng)目中,當(dāng)使用環(huán)境變量進(jìn)行條件組件加載時(shí),在生產(chǎn)環(huán)境打包后可能會(huì)出現(xiàn) CSS 樣式丟失的問題,本文通過代碼示例給大家介紹了三種解決方案,需要的朋友可以參考下
2025-08-08
vue 2.0封裝model組件的方法
本篇文章主要介紹了vue 2.0封裝model組件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
調(diào)用createApp?時(shí)Vue工作過程原理
這篇文章主要為大家介紹了調(diào)用createApp?時(shí)Vue工作過程原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
vue項(xiàng)目使用websocket連接問題及解決
這篇文章主要介紹了vue項(xiàng)目使用websocket連接問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
基于Vue3實(shí)現(xiàn)圖片拖拽上傳功能
前端開發(fā)中,用戶體驗(yàn)是至關(guān)重要的,圖像上傳是許多 web 應(yīng)用中經(jīng)常需要的功能之一,為了提升用戶的交互體驗(yàn),拖拽上傳功能可以減少用戶的操作步驟,本文將介紹如何使用 Vue 3實(shí)現(xiàn)一個(gè)簡(jiǎn)單的圖片拖拽上傳功能,需要的朋友可以參考下
2024-08-08