網站首頁 學習教育 IT科技 金融知識 旅遊規劃 生活小知識 家鄉美食 養生小知識 健身運動 美容百科 遊戲知識 綜合知識
當前位置:趣知科普吧 > IT科技 > 

prop屬性|vue

欄目: IT科技 / 發佈於: / 人氣:2.42W

在沒有狀態管理機制的時候,prop屬性是組件之間主要的通信方式,prop屬性其實是一個對象,在這個對象裏可以定義一些數據,而這些數據可以透過父組件傳遞給子組件。

vue prop屬性

prop屬性可以定義屬性的類型,也可以定義屬性的初始值。

prop定義的數據類型具體示例如下:

props: {

    name: String, //字元串類型

    type: {

      validator: function(value) { //驗證函數

        // 這個值必須匹配下列字元串中的一個

        return ["success", "warning", "danger"].includes(value);

      }

    },

    list: {

      type: Array,//數組類型,也可以是Object

      default: () => []

    },

    isVisible: { //Boolean類型

      type: Boolean,

      default: false

    },

    onChange: {  //函數類型

      type: Function,

       default: () => {}

    }

  },

如name:String,default:"vm",表示第一次加載name屬性時其值爲vm。prop屬性中定義的屬性也可以驗證該屬性,比如上面的type屬性,其值必須是"success", "warning", "danger"中的任意一個,要是不是這是三個中的任意一個也可以顯示,但是這時控制檯會報錯,所以要使用validator驗證函數時要謹慎。這裏的list定義的是一個數組,默認必須從一個工廠函數獲取。isVisble定義的是一個boolean值,默認是default:false。onChange定義的是一個函數,這個函數在這裏的意義是建立子組件向父組件傳值的途徑。

vue prop屬性 第2張

關於prop屬性用法,我們就分享到這啦!

Tags:prop vue 屬性