关于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>