Vue this.$refs的作用

╰半橙微兮° 2023-09-30 14:28 6阅读 0赞

**案例一、ref 写在标签上时**

<div id="root">
            
            <div
                ref = 'hello'
                @click = "handleClick">
                laugh yourself
            </div>
        </div>
    
        <script>
            var vm = new Vue({
        
                el: '#root',
                methods: {
        
                    handleClick: function() {
        
                        //this.$refs : 获取整个Vue实例中所有的引用 然后再找到hello这个引用 指向div那个dom节点
                        //console.log(this.$refs.hello)
                        alert(this.$refs.hello.innerHTML)
                    }
                }
            })
        </script>

**案例二、 ref 写在组件上时**  
计数：

<div id="root">
            
            <counter ref="one" @change="handleChange"></counter>
    
            <counter ref="two" @change="handleChange"></counter>
            <div>{
        {
        total}}</div>
        </div>
    
        <script>
            Vue.component('counter', {
        
                template: '<div @click="handleClick"> {
        {number}} </div>',
                data: function() {
        
                    return {
        
                        number: 0
                    }
                },
                methods: {
        
                    handleClick: function() {
        
                        this.number ++
                        //子组件向父组件传值  子组件被点击的时候 number+1  同时告诉外面 也即是触发一个事件
                        this.$emit('change')
                    }
                },
            })
    
            var vm = new Vue({
        
                el: '#root',
                data: {
        
                    total: 0
                },
                methods: {
        
                    handleChange: function() {
        
                        //在此方法中计算两个数量的和  通过this.$refs.引用名字 获取两个子组件的引用
                        this.total = this.$refs.one.number +
                                        this.$refs.two.number
                    }
                }
            })
        </script>

![在这里插入图片描述][20191010170743540.png]

[20191010170743540.png]: https://img-blog.csdnimg.cn/20191010170743540.png