Vue $ref 的用法

<div id="app">
    <cpn $ref="item"></cpn>
    <cpn></cpn>
    <cpn></cpn>
    <button @click="btnClick">按钮</button>
</div>

<template>
    <div>我是子组件</div>
</template>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const cpn = {
    template: '#cpn'
}
const app = new Vue({
    el: '#app',
    data: {
        message: '你好啊'
    },
    components: {
        cpn
    },
    methods: {
        btnClick () {
            console.log(this.$refs) //（item，Vuecomponent)
        }
    }
})
</script>

通过$children也可以操作获取dom元素，但是$children访问子组件时，是一个数组类型，访问其中的子组件必须通过索引值。但是当子组件过多，我们需要拿到其中一个时，往往不能确定它的索引值，甚至还可能会发生变化。如果我们想明确获取其中一个特定的组件，这个时候就可以使用$refs

ref如果绑定在组件中，通过this.$ref.name获取到的是组件名称，如果绑定在普通元素上，通过this.$ref.name获取到的是元素名称

<div class="scroll-wrapper" ref="wrapper"></div>