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

<style> /*.selectWrap{
width: 100px;
}*/
....... </style>

　

我们通过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自定义组件封装的简单实例，大家可以研究下