VUE ElementUI 下拉框组件（select）的封装

今天写一下elementUI中select组件的封装：以下面这个以可搜索的下拉框为例：

 1.创建子组件：Select.vue

2.父组件：

页面效果：

这个例子是做了一个二级联动的效果，当第一个下拉框选择后，第二个下拉框的内容就确定了；

比较难懂的部分是：

子组件：

 这所以加这行代码是为了，首次加载时，第一个下拉框有默认值的情况下第二个下拉框也有相应的默认值。

      change(val) {
        console.log(val);
        //方法：利用select对象把值传给父组件
        this.select.result = val
        //把二级子项的数据找到，并传给父组件
        let a = this.buildChild(val)
        console.log(a);
        this.$emit('erjichange',a)
        //第二种方法触发父组件的change属性
        // this.select.chang && this.select.change(this.buildChild(val))
      },
      buildChild(val){
        let data = this.select.data.find(item=>{
          return item.value == val
        })
        return data.children
      }

父组件：

 

 以上我是采用了两种触发父组件change方法的方法：一种是给的select对象添加change属性，二种是用子传父的$emit方法；