vue.js - $el 未定义，而 $ref 在 Vuejs 3 中有一个对象

Question

我试图获取对文本框元素的引用，但 $el 未定义，而其 $ref 具有对象。

我在这里做错了什么......我过度简化了我的代码来提出这个问题。谢谢!

    app.component('lit-entry', {
        template:
            /*html*/
            `
    <div>
    
    {{ message }}
    
    <input v-model="favoriteColor" type="textbox" ref="refColor" />
    
    </div>
    
    `,
        data() {
            return {
               message :"Hey there!",
                favoriteColor:"Blue"
            }
           
        }
        , mounted() {
          
            debugger;
            var x = this.$refs.refColor.$el;  
           //refColor has a value but $el is undefined?!?             
    
        }
    
    });

Answer 1

对于带有ref的组件，ref是组件实例，$el属性是DOM元素。

对于元素，即 input ， ref 是 DOM 元素本身，它不应该具有 $el 属性。