针对mint-ui的button组件,其源码template一部分内容如下
<template>
<button :class=" {'is-disabled': disabled,is-plain': plain}">
.....
</button>
</template>
重点看其中两行代码
'is-disabled': disabled,'is-plain': plain
button.vue组件props出去的变量如下
props: {
plain: Boolean,
disabled: Boolean,
......
}
可以看出plain和disabled都没有定义默认值。
在官网介绍中可以这样调用(mt-button即是上面的组件)
<mt-button plain>plain</mt-button>
因为我自己调用的时候,大致会采用如下的方式
<mt-button :plain='某某变量'>plain</mt-button>,其中某某变量的值为true
那么问题来了,官网的调用中,为什么效果和我自己采取的方式是一致的,即为什么直接写plain效果等同于:plain=‘值为true的变量’
当prop的参数其type是布尔值时,直接使用plain这样,其子组件内传递至为true。
未读过vue源码,但是觉得这个可能是其本身的一个设计,我仿佛看到了input上checked的影子。