vue組件參數(shù)校驗和非prop特性

1.父組件再給子組件傳值的時候,子組件接收值,子組件會對接收的值進行一些規(guī)范約束,主要一下幾種方式:

 <div id="app">
   <child :content="{a:1}" :msg="123" val="hello world"></child>
  </div>

  <script>
    Vue.component('child',{
      props:{
        content:Object,//規(guī)定必須是對象
        msg:[String,Number],//規(guī)定必須是字符串或者數(shù)字
        val:{
          type:String,//規(guī)定類型必須是字符串
          required:true,//規(guī)定必須傳這個屬性值,如果不傳就會報錯
          default:'default value',//規(guī)定默認值,如果不傳值,就顯示default規(guī)定的值
          validator:function(value){//自定義校驗器,這里規(guī)定傳入的值的長度大于5
            return (value.length>5)
          }
        }
      },
      template:'<div>{{content}}+{{msg}}+{{val}}</div>'
    })

    var vm = new Vue({
      el:"#app",
    })
  </script>

2.非prop特性

和props特別的主要區(qū)別是,props特性可以使用插值的形式獲取父組件傳遞的值,而非props不能,props特性在頁面渲染的時候不會顯示出來,非props特性是以屬性的方式顯示在渲染出來的html模板中

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 用兩張圖告訴你,為什么你的 App 會卡頓? - Android - 掘金 Cover 有什么料? 從這篇文章中你...
    hw1212閱讀 13,900評論 2 59
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,733評論 25 709
  • 前言 您將在本文當中了解到,往網(wǎng)頁中添加數(shù)據(jù),從傳統(tǒng)的dom操作過渡到數(shù)據(jù)層操作,實現(xiàn)同一個目標,兩種不同的方式....
    itclanCoder閱讀 26,238評論 1 12
  • 寫作,反映人生的軌跡和生命的歷程。你讀了什么,想了什么,就會動之于心自然而然的流露出來然后行諸于筆。 隨著社會和科...
    吾心如初閱讀 337評論 1 1
  • 你那張被世俗所洗禮的臉龐,布滿了滄桑,寫滿了故事。無論怎樣擠出滿臉的笑容也遮擋不住你的疲憊與滄桑。無論怎樣裝無辜也...
    墟城_閱讀 171評論 0 0

友情鏈接更多精彩內容