Vue组件继承

公司后台系统使用了 Vue + ElementUI, 使用 TypeScript ElementUI 简单，但是还不够简单，就想写一些比较简单的和公司业务有关联的组件； 最简单的，例如 Autocomplete 组件， 例如，基于某一个类型的 Autocomplete 组件，用法如下: 简单的用法，好办: 自定义一个组件，里面包含有 elautocomplete 组件，然后写属性，写代码，轻松搞定；

。。。。。 但是，很快问题来了，我的组件需要增加 placeholder 属性，这个也很见简单。。。  

但是，很快问题来了，我的组件需要添加 class 属性， 于是，这样似乎没完没了了。。。因为基本上 el-autocomplete 里面的所有属性都需要一五一十的添加到我自定义的组件里，然后再添加到自定义的组件所包含的 el-autocomplete 里； 这还只是一个 autocomplete 组件，还有一堆的其他的 element-ui 组件 很明显，component模式不是一个好的想法；因为对于包裹的组件，我们需要暴露包裹的组件的每一个属性和方法以及事件，这样一想，当然使用继承更好； 最简单的，当然就是下面这样，

可惜，楼上这样的写法是错误的。。正确的写法是像下面这样：

但是，郁闷的是，我们需要覆盖 ElAutocomplete 组件里面的 fetchSuggestions  属性，这样我们才能够使用 这样的方式， 然后我们的组件覆盖 fetchSuggestions 属性，让这个属性所对应的函数 能够根据 entityTypeName 去从服务器后台查询 客户列表，并显示在  Autocomplete 的下拉列表中 好吧，这个也不难，因为 fetchSuggestions 是 ELAutocomplete 定义的 Prop, 我们不能直接给这个 Prop 赋值，（要强制赋值貌似也可以，vue也就给一个警告而已），但是对于强迫症的俺而言，警告当然是不能接受的； 于是，不能直接给 fetchSuggestions  prop 赋值，那我自己定义一个 fetchSuggestions  属性， 像下面这样，

测试一下，貌似能够工作，但是，稀奇的事情发生了： 如果 autocomplete 没有内容时，点击 autocomplete 将显示 abc 和 def 两个下拉选项 但如果选中 abc 这一项，再次点击，居然就告诉我说 fetchSuggestions 函数没有定义；看起来，感觉上 el-autocomplete 在没有内容时，使用的是 this.fetchSuggestions 进行填充数组的查询； 但, el-autocomplete 选中了内容时，使用的是  this.$props['fetchSuggestions'] 来进行填充数组的查询； 稀奇的处理方式。。。 这样，我们的问题是，我们需要继承 EL-autocomplete 组件，但是还必须能够覆盖其中的 Props 定义。。。 这个也不难。。。

上面的代码默认会报编译错误，因为 typescript  如果启用 strict 模式，noImplicitThis 为 true, tsconfig.json 里面的 noImplicitThis 编译选项需要改为 false, 才能够使 this 可以为 any 类型； 看上去貌似没有问题； 但熟悉 TypeScript 的同学都知道，这儿有一个隐藏的 this 问题；http://blog.darkthread.net/post-2016-04-23-typescript-this-pitfall-in-debug.aspx  这儿有详细说明， TypeScript 太智能了，它自动把  this 移到了外面，这个时候的 this 将指向  {     default: () =>  (key: string, cb: FetchSuggestionsCallback) => {         let vthis = this as any; // as any; //this as AbstractEntityQueryComponent;         vthis.remoteQuery(key, cb);       }   } 这个对象，而不是我们想要的  EhayAutoComplete  组件的实例； 所以，这个时候会报一个脚本错误，也就是  remoteQuery 未定义错误； 这儿的悲催问题是，在  {     default: () =>  (key: string, cb: FetchSuggestionsCallback) => {         let vthis = this as any;          vthis.remoteQuery(key, cb);       }   }    这个对象内，我们没有办法访问直接或者间接访问 EhayAutoComplete 的当前实例， 悲催的是，调试一下，设个断点， this 明明指向了 EhayAutoComplete 的当前实例， 但是 typescript 编译器产生的代码就变成了 _this 变量； 还好，typescript 还是留了一道小口子， 我们改成  let vthis = eval('this');    就可以访问到调用这个函数的 this 对象，也就是  EhayAutoComplete 的当前实例，  

很好，组件基本完成，但是这样就够了吗？？当然不够啦； 实体查询的代码，很明显，不但可以用于 autocomplete 还可以用于其他的地方，例如 select 之类的组件，所以，我们需要把实体查询的代码从 EhayAutoComplete 中抽离出来，这样我们的任务是， 我们的组件需要继承 el-autocomplete 以及 我们自己的 entity-query 两个类 Vue实现这个也不难，因为它有 mixins 方法，可以混合2个类的属性、方法； 于是把实体查询的代码抽离出来， 这里面 WebApi, EhayModel 之类的都是根据服务器后台接口自动产生的 typescript 代码；

再修改一下组件定义，混合 elementUI.Autocomplete 和  AbstractEntityQueryComponent 两个类定义， 终于，大功告成。。