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

谁借莪１个温暖的怀抱￠ 2022-05-19 03:29 180阅读 0赞

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

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

<el-select v-model="selectState" placeholder="状态" @change="selectStatusChange"
                               size="small">
                        <el-option v-for="item in opentions" :label="item.label" :value="item.value"
                                   :key="item.key"></el-option>
                    </el-select>

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

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

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

<el-tree
    
                      ref="tree"
                      :data="treeList"
                      :props="defaultProps"
                      @node-click="handleNodeClick"
                      @getCheckedKeys()="function"
                      show-checkbox=true
                      node-key="id"
                    >
            </el-tree>

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

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