中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue中props如何使用

發布時間:2021-07-21 14:27:11 來源:億速云 閱讀:188 作者:Leah 欄目:web開發

本篇文章為大家展示了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>

vue中props如何使用

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如何使用,你們學到知識或技能了嗎?如果還想學到更多技能或者豐富自己的知識儲備,歡迎關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

彭州市| 弋阳县| 巨鹿县| 盈江县| 古交市| 什邡市| 富源县| 山阴县| 景谷| 吴忠市| 六枝特区| 仁布县| 黔南| 波密县| 永城市| 方山县| 延长县| 保靖县| 呼伦贝尔市| 延吉市| 繁昌县| 屏山县| 隆昌县| 济宁市| 精河县| 确山县| 龙州县| 东宁县| 曲阜市| 榆林市| 松溪县| 平度市| 句容市| 仙桃市| 浙江省| 古丈县| 北安市| 淮阳县| 章丘市| 兰西县| 怀柔区|