组件中的refs的使用

<template>
    <div class="wrapper">
        <div class="content">
            <slot></slot>
        </div>
    </div>
</template>
<script>
export default{
    name:"Scroll",
    data(){
        return {
            scroll:null        
        }
    },
    mounted(){
        this.scroll=......document.querySelector('.wrapper')
    }
}
</script>

通过querySelector去拿.wrapper，有时会拿错，比如别的组件或上一级组件里也有.wrapper，在VUE中，要明确的拿到某个元素，用ref

<template>
    <div class="wrapper" ref="wrapper">
        <div class="content">
            <slot></slot>
        </div>
    </div>
</template>
<script>
export default{
    name:"Scroll",
    data(){
        return {
            scroll:null        
        }
    },
    mounted(){
        //this.scroll=......document.querySelector('.wrapper')
        this.scroll=......this.$refs.wrapper
    }
}
</script>

取到的一定是当前这个组件