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>