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>