vuejs中data與props的差異:1、data不需要使用者(開發者)傳值,自身維護;而props需要使用者(開發者)傳值。 2.data上的資料都是可讀可寫的;而props上的資料只可以讀的,無法重新賦值。
本教學操作環境:windows7系統、vue2.9.6版,DELL G3電腦。
在使用Vue.js
的過程中,常常會遇到 data
和 props
。今天就來探索二者的差異。
data
Object
| Function
Function
Vue
實例的資料物件。 Vue
將會遞迴將 data
的屬性轉換為 getter/setter
,讓 data
的屬性能夠回應資料變更。物件必須是純粹的物件 (含有零個或多個的 key/value
對):瀏覽器 API
所建立的原生對象,原型上的屬性會被忽略。大概來說,data
應該只能是資料 - 不推薦觀察擁有狀態行為的物件。 var data = { a: 1 } // 直接创建一个实例 var vm = new Vue({ data: data }) vm.a // => 1 vm.$data === data // => true // Vue.extend() 中 data 必须是函数 var Component = Vue.extend({ data: function () { return { a: 1 } } })
props
Array98c455a79ddfebb79781bff588e7b37e
| Object
props
可以是陣列或對象,用來接收來自父元件的資料。 props
可以是簡單的數組,或使用物件作為替代,物件允許配置進階選項,如類型偵測、自訂驗證和設定預設值。 // 简单语法 Vue.component('props-demo-simple', { props: ['size', 'myMessage'] }) // 对象语法,提供验证 Vue.component('props-demo-advanced', { props: { // 检测类型 height: Number, // 检测类型 + 其他验证 age: { type: Number, default: 0, required: true, validator: function (value) { return value >= 0 } } } })
#區別一:
##data#不需要使用者(開發者)傳值,自身維護
props需要使用者(開發者)傳值
程式學習! !
以上是vuejs中data與props的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!