从零开始封装自己的自定义Vue组件(2)

我们通过props将之前的subject和selectContent从父组件传了进来。同时，我们还将select的宽度传了进来，并通过mounted来设置宽度。这样，父组件就能控制子组件的内容和一些简单的样式了。

当然，作为一个完善的组件，我们还需要为组件设置默认值，这样就算父组件不传值，我们的这个组件一样可以使用

<template> ......</template> <script> export default{ props:{ selectWidth:{ type:Number, default:100, }, subject:{ type:Array, default:function(){ return [] } }, selectContent:{ type:Object, default:function(){ return {value:0,text:"请选择"} } }, }, mounted(){ document.querySelector(".selectWrap").style.width = this.selectWidth+"px"; }, ...... methods:{ ...... choose(item){ this.selectContent.text = item.text; this.optionWrapper.style.display = "none"; } }, }</script> <style> ......</style>

这回我们将props用对象的方式声明，并设置了默认值（default），假如父组件没有设置子组件的宽度，那么我们可以使用默认的100px。这样，我们的组件更加的完善！当然，我们的组件还有一个关键的功能没有实现，就是把选中的值传回给父组件，不然的话这个组件就没有意义了，我们来看choose这个函数

choose(item,value){ this.selectContent.text = item.text; this.optionWrapper.style.display = "none"; this.$emit("changeSelect",this.selectContent.text,this.selectContent.value); }

这样，我们就可以把选到的文本和value值传给父组件了。

当然，这仅仅是一个开头，字体大小等内容我还没有设置，不过这个组件现在已经完全可以拿出去用了

以上是vue自定义组件封装的简单实例，大家可以研究下

您可能感兴趣的文章: