Vue中的v-el与v-ref

桃扇骨 2022-04-22 10:54 963阅读 0赞

# v-el #

*  作用：

通过`v-el`我们可以获取到`DOM`对象。

# v-ref #

*  作用：

通过`v-ref`获取到整个组件（`component`）的对象。

# 示例 #

## 源码 ##

<!DOCTYPE html>
    <html lang="en" xmlns:v-el="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>组件</title>
    </head>
    <body>
        <template id="demo">
            <h2>组件对象</h2>
        </template>
        <div id="app">
            <h2 v-el:myh2>DOM对象</h2>
            <button @click="getDom">获取DOM对象</button>
            <hr>
            <demo v-ref:mycom></demo>
            <button @click="getCom">获取组件对象</button>
        </div>
    <script src="../../../js/vue/vue/1.0/vue.js"></script>
    <script type="application/javascript">
        //创建Vue对象
        new Vue({
            el:'#app'
            ,methods:{
                getDom(){
                    console.log(this.$els.myh2);
                }
                ,getCom(){
                    console.log(this.$refs.mycom);
                }
            }
            ,components:{
                'demo':{
                    template:'#demo'
                }
            }
        });
    </script>
    </body>
    </html>

## 结果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1paWTEwNzg2ODkyNzY_size_16_color_FFFFFF_t_70]

## 分析 ##

上面的代码实现的功能是，通过点击`获取DOM对象`按钮，其会在控制台中打印出其获取的DOM对象信息；而当我们点击第二个`获取组件对象`按钮时，其会在控制台中打印出整个控件的信息。

第一个方法中，其`DOM`对象是通过`v-el`将当前的`h2`的`DOM`对象绑定到`this.$els`中，其中`myh2`即为当前`DOM`对象的名称，这里注意的是，这里是区分大小写的，假如说我们在控件中用`v-el:myH2`定义，则在调用的时候，仍然使用`this.$els.myh2`，否则会出现`undefined`信息。

第二个方法中，其组件对象通过`v-ref`将当前组件绑定到`this.$refs`中，在这里一样得注意大小写问题，如果我们将组件的名称定义为`v-ref:myCom`，则组件的调用仍然是`this.$refs.mycom`

而对于上面的这种大小写情况，与其说是不很人性化，倒不如说是个`bug`更为恰当。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1paWTEwNzg2ODkyNzY_size_16_color_FFFFFF_t_70]: /images/20220422/b0876e2c08984bbfba244cec83d61487.png