ref 的巧妙使用 ---关于在vue中操作dom的问题2

我们虽然使用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