Vue 获取DOM元素，给DOM增加事件的特殊情况

Chestnut*

于 2019-05-12 17:23:58 发布

阅读量4.6k

点赞数 1

分类专栏： vue 文章标签： Vue 获取DOM元素，给DOM增加事件的特殊情况

本文链接：https://blog.youkuaiyun.com/weixin_43830188/article/details/90142665

版权

vue 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了在Vue.js中如何使用ref属性获取DOM元素并绑定事件，探讨了特殊情况下的DOM元素获取方法，以及如何在DOM更新后通过$nextTick()函数执行回调确保DOM已更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue 获取DOM元素，给DOM增加事件的特殊情况

给标签绑定ref属性使用this.$refs.xxx 获取原生的jsDOM对象
ref属性值不能重名

	Vue.component('subCom',{
        template:`<div class="subCom"></div>`
    })

    var App = {
        template:`
                <div class="app">
                    <button ref="btn">按钮1</button>
                    <subCom ref="abc"/>
                </div>`,
        created() {
            console.log(this.$refs.btn);
        },
        mounted() {
            console.log(this.$refs.btn);
            // 如果给组件绑定ref属性，那么this.$refs.xxx获取的是当前的组件对象 
            console.log(this.$refs.abc);
        },
    };
    new Vue({
        el:"#app",
        data() {
            return {
                
            }
        },
        components:{
            App
        },
        template:`<App></App>`
    })

$nextTick()
在DOM更新循环结束之后执行回调函数，在修改数据之后使用此方法
在回调中获取到更新后的DOM

	var App = {
        data() {
            return {
                isShow:false,
            }
        },
        template:`<div class="app">
                        <input type="text" v-show="isShow" ref="input">
                    </div>`,
        mounted() {
            this.isShow = true;
            this.$nextTick(()=>{
                // 数据更新之后表单获取焦点
                this.$refs.input.focus();
            })
        },
    };
    new Vue({
        el:"#app",
        components:{
            App
        },
        template:`<App/>`
    })