iview中的render函数由于从别的组件中引入,所以this
2018-08-15 本文已影响1009人
传奇狗
现遇到以下问题,我在使用iview框架结合vue制作后台管理系统的时候,使用iview的table表格组件,打算把公共表头都写在一个文件里面,各个页面按需引用它。
![](https://img.haomeiwen.com/i6285858/4084f15629d93249.png)
![](https://img.haomeiwen.com/i6285858/e7ca09f6dbd6c314.png)
这个时候,我使用table中的 render函数去绑定页面方法的时候,总是报错,报not a function
![](https://img.haomeiwen.com/i6285858/d5071c5bb73342f1.png)
打印this之后发现this指向了window,而不是vue实例:
![](https://img.haomeiwen.com/i6285858/4036da3bd484fdb8.png)
网上给得答案太少了,然后我就想到一个很不推荐的办法,把调用这个表头数据的页面中,把vue实例抛给window,我个人及其不推荐。
但是目前又无能为力。
方法如下:全局var一个变量,如selfs
![](https://img.haomeiwen.com/i6285858/7e5aa1f00ecfc2be.png)
在此页面vue实例,钩子函数created中,将this抛给window。
![](https://img.haomeiwen.com/i6285858/be2c52c3f9405c52.png)
然后在回到表头那个文件中,render函数里面打印this或者window,会发现有了个叫做‘selfs’,里面就是此页面的vue实例:
![](https://img.haomeiwen.com/i6285858/8f817c6232010108.png)
然后可以随意调用了。
![](https://img.haomeiwen.com/i6285858/918f43d27382664d.png)
后记:
iview之前在table标签中有一个‘:context=’这个属性,是规定上下文的,这里存放对的this就可以改变被调用‘表头数据’文件中的this指向了。不知为何后来被废弃了;也有人说使用$refs方式,这种我不是没有试过,但是没起作用。
这种办法我个人认为是很不规范的,如果路过的大神有更好的解决方案,跪求大神不吝赐教!