mint-ui Button源码疑问

针对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的变量’

阅读 4.6k
2 个回答

当prop的参数其type是布尔值时,直接使用plain这样,其子组件内传递至为true。
未读过vue源码,但是觉得这个可能是其本身的一个设计,我仿佛看到了input上checked的影子。

这应该属于非prop属性传值,只是正好在mt-button中,有plain这个属性,就会解析成true。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题