最近用到了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());那我也没有试过会怎么样,会调用什么方法。总之可能你调用了一个方法,但是你没有任何的实现,那这就没有任何的意义了。

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

Logo

前往低代码交流专区

更多推荐