Vue+elementUI的this.$refs.对象名.方法名的理解

最近用到了Vue+elementUI,原先觉得是坑多,后来发现是自己理解不到位。elementUI为很多控件都提供了事件(方法)
现在我们就说说这些方法

例一:如下面这段代码中,select控件里面我绑定了一个change事件,该事件是elementUI封装好的,其实这些封装好的事件就相当于是一个接口,而我们的selectStatusChange,相当于去实现这个接口的一个类的对象,至于该接口做什么,elementUI给我们定义了这个规范(规定就是当改变控件的时候触发该事件:这是该接口(即@change)的作用),然后接口里具体的代码实现的需要我们自己去写。
其实说这么多就是像改变一下我对这控件事件的理解思维。以前只觉得就是个方法,我定义,调用实现就OK了。现在不是这样,他们也都是一个个的接口或者实现好的方法,我们定义的方法相当于是一个对象去实现或者覆盖它们。


                    
                

案例二:以前根本看不懂这么写是什么意思:

this.$refs.tree.getCheckedKeys());

其实上面的方法就是已经封装好的,直接调用即可,this,代表在当前vue里,$refs代表一个引用(可以把它近似看成一个包名,)然后tree就是我们的el-tree的ref,可以理解为是该控件的一个对象,然后我们可以通过对象调用方法。但是如果按照案例一那样写就不对了
即:

 
        

上面这样写其实本质上就是我们自己定义的一个方法,覆盖掉了,原先elementUI帮我们封装好的方法,我们调用的时候就是我们自己的了,我们可以根据我们所需要的自定义实现该方法。如果要想调用原生态的方法就用this. r e f s . t r e e . g e t C h e c k e d K e y s ( ) ) ; 这 种 方 式 。 但 是 也 不 见 得 所 有 的 事 件 都 有 原 生 态 的 方 法 , 比 如 有 些 事 件 只 是 定 义 了 一 个 接 口 , 具 体 的 实 现 还 得 我 们 自 己 来 , 比 如 我 们 的 b u t t o n 点 击 事 件 , 我 们 的 自 己 实 现 想 要 的 功 能 , 因 为 需 求 是 不 同 的 。 如 果 你 只 写 写 成 这 样 t h i s . refs.tree.getCheckedKeys());这种方式。但是也不见得所有的事件都有原生态的方法,比如有些事件只是定义了一个接口,具体的实现还得我们自己来,比如我们的button点击事件,我们的自己实现想要的功能,因为需求是不同的。如果你只写写成这样this. refs.tree.getCheckedKeys());buttonthis.refs.tree.getCheckedKeys());那我也没有试过会怎么样,会调用什么方法。总之可能你调用了一个方法,但是你没有任何的实现,那这就没有任何的意义了。

注:以后写代码,看代码,或者用新的控件,还是要用面向对象的思维去理解,那样会看到框架后的本质(果真是万物皆对象),受益匪浅啊,非常感谢孟学长,给我解答了好多疑惑。

你可能感兴趣的:(ElementUI)