iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 7
0

component 物件屬性
一個 component 物件常用的屬性有:
data:作為頁面資料存放的位置,在 components 中必須為一個回傳物件的方法
props:作為傳入 component 的參數
簡單的定義方式:

Vue.component('param-demo', {
props: ['message', 'size']
});
<param-demo message="welcome" size="10"></param-demo>

進階的定義方式:

component('example', {
props: {
// basic type check (`null` means accept any type)
onSomeEvent: Function,
// check presence
requiredProp: {
type: String,
required: true
},
// with default value
propWithDefault: {
type: Number,
default: 100
},
// object/array defaults should be returned from a
// factory function
propWithObjectDefault: {
type: Object,
default: function () {
return { msg: 'hello' }
}
},
// a two-way prop. will throw warning if binding type
// does not match.
twoWayProp: {
twoWay: true
},
// custom validator function
greaterThanTen: {
validator: function (value) {
return value > 10
}
}
}
});

methods:component 中使用到的頁面方法
computed:經過計算更新值的屬性,類似 getter 與 setter
template:頁面 html 內容
其他 Instance Lifecycle Hooks


上一篇
6.Components
下一篇
8.Data-binding
系列文
Vue菜鳥的自我學習days39
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言