Vue parent component subassemblies way to obtain $ 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 can operate by obtaining dom element, but when children $ access subassembly, is an array type, in which the access through the index value must subassembly. But when too many sub-components, we need to get one, it can not determine its index value and may even change. If we want to get a clear one particular component, this time you can use $ refs