Vue中操作dom的方法$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 app = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        },
        methods: {
            btnClick () {
                console.log(this.$refs) //item
            }
        }
    })
</script>

Vue.js 提供了我们一个获取 DOM 对象的接口—— vm.$refs。在这里，我们通过了 this.$refs.item访问到了这个 DOM 对象，并且我们在 mounted 这个钩子函数里，this.$nextTick 的回调函数中初始化

因为 Vue 是数据驱动的， Vue 数据发生变化（this.data = res.data）到页面重新渲染是一个异步的过程，我们的初始化时机是要在 DOM 重新渲染后，所以这里用到了 this.$nextTick，当然替换成 setTimeout(fn, 20) 也是可以的。

this.$nextTick(() => {
console.log(this.$refs.item)
this.$refs.item.style.color='red'
})

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