Vue.js组件开发三要素：属性、与插槽.pdfVIP

基础:Vue.js组件的三个API:属

性、、插槽

如果您已经对Vue.js组件的基础用法了如指掌，可以跳过本小节，不

过当做复习稍读一下也无妨。

组件的构成

一个再复杂的组件，都是由三部分组成的：属性、、插槽，它们构成

了Vue.js组件的API。如果你开发的是一个通用组件，那一定要事先设计好

这三部分，因为组件一旦发布，后面再修改API就很了，使用者都是希

望不断新增功能，修复bug，而不是经常变更接口。如果你阅读别人写的组

件，也可以从这三个部分展开，它们可以帮助你快速了解一个组件的所有

功能。

属性prop

prop定义了这个组件有哪些可配置的属性，组件的功能也都是它

来确定的。写通用组件时，props用对象的写法，这样可以针对每

个属性设置类型、默认值或自定义校验属性的值，这点在组件开发中很

重要，然而很多人却忽视，直接使用props的数组用法，这样的组件往

往是不严谨的。比如我们封装一个按钮组件i-button：

基础：Vue.js组件的三个API：

prop、event、slot

如果您已经对Vue.js组件的基础⽤法了如指掌，可以跳过本⼩

节，不过当做复习稍读⼀下也⽆妨。

组件的构成

⼀个再复杂的组件，都是由三部分组成的：prop、event、slot，它

们构成了Vue.js组件的API。如果你开发的是⼀个通⽤组件，那⼀

定要事先设计好这三部分，因为组件⼀旦发布，后⾯再修改API就

很了，使⽤者都是希望不断新增功能，修复bug，⽽不是经常

变更接⼝。如果你阅读别⼈写的组件，也可以从这三个部分展开，它

们可以帮助你快速了解⼀个组件的所有功能。

属性prop

prop定义了这个组件有哪些可配置的属性，组件的核⼼功能也都是

它来确定的。写通⽤组件时，props⽤对象的写法，这样可以

针对每个属性设置类型、默认值或⾃定义校验属性的值，这点在组件

开发中很重要，然⽽很多⼈却忽视，直接使⽤props的数组⽤法，

这样的组件往往是不严谨的。⽐如我们封装⼀个按钮组件i-

button：

temtebutton:classi‑button‑size+size:

disableddisabled/button/temtescript//判断参

数是否是其中之一函数oneOf(value,validList){for(leti=0;

ivalidList.length;i++){if(valuevalidList[i]){返回

真;}}返回假;}导出默认{props:{size:{验证器(value){

returnoneOf(value,[small,large,default]);},默认:默认

},禁用:{类型:布尔,默认:假}}}/script

使用组件:

temte

button:classi-button-size+size

:disableddisabled/button

/temte

script

//判断参数是否是其中之⼀

functiononeOf(value,validList){

for(leti0;ivalidList.length;i++)

{if(valuevalidList[i]){

returntrue;

}

}

returnfalse;

}

exportdefault

{props:{

size:{

validator(value){

returnoneOf(value,[small,large,

default]);