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 cpn = {
    template: '#cpn'
}
const app = new Vue({
    el: '#app',
    data: {
        message: '你好啊'
    },
    components: {
        cpn
    },
    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