关于vue.js:vue组件略佳操作

button组件

亮点:prop接管参数

<template> 
<button :class="'i-button-size' + size" :disabled="disabled">
</button> 
</template>
<script>
 // 判断参数是否是其中之⼀ 
function oneOf (value, validList) {
for (let i = 0; i < validList.length; i++) { 
if (value === validList[i]) { return true; }
 }
return false; 
}
export default { 
props: { 
size: { 
validator (value) 
{ return oneOf(value, ['small', 'large', 'default']); },
default: 'default' },
disabled: { 
type: Boolean, default: false
 } } } 
</script>

使⽤组件：

<i-button size="large">
</i-button> 
<i-button disabled></i-button>