ref 的巧妙使用 ---关于在vue中操作dom的问题2-优快云博客

博客指出使用Vue时一般不操作DOM，但某些情况需操作。介绍了用ref绑定div，通过this.$refs获取所有引用的方法。还提出使用自定义子组件时的问题，并以计时器小例子讲述实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们虽然使用vue的时候是不会去操作它的dom的。但是有些情况下我们也不得不这么做，那么我们应该如何处理这种情况呢？我们使用 ref 去绑定到 div中，之后我们通过 this.$refs (获取到 vue中所有的引用) 但是如果我们是使用自定义的子组件又该如何解决问题呢？下面是一个计时器的小例子讲述了实现的具体过程：

html:
<div id="app">
        <counter ref="one" @change="handleChange"></counter>
        <counter ref="two" @change="handleChange"></counter>
        <div>{{total}}</div>
</div>

JS:
Vue.component('counter',{
            // error  temlpate
            template: '<div @click="handleClick">{{number}}</div>',
            // 注意点 子组件中的 data 的是函数还是对象
            data: function() {
                //number: 0  data functions should return an object:
                return {
                    number: 0
                }
            },
            methods: {
                handleClick: function() {
                    this.number ++
                    // 涉及到子组件 向父组件 传值的内容
                    // 你的子组件发生变化之后会触发 change事件，那我们在哪里实时监听呢？

                    this.$emit('change')
                },
            }
        })

        var vm = new Vue({
            el: "#app",
            data: {
                total: 0
            },
            methods: {
                handleChange: function() {
                // console.log('change');
                // 这里我们用 ref 实际上是获取到了 counter组件的引用
                // 此时我们拿到了 所需要的数字那么我们之后该怎么做呢？
                console.log(this.$refs.one.number);
                console.log(this.$refs.two.number);

                this.total = this.$refs.one.number + this.$refs.two.number
                }
            }
            
        })

转载于:https://my.oschina.net/u/3520255/blog/3025339