ref和$refs的使用

场景：获取某个DOM元素进行事件的触发（调试时使用，触发click）。

参考：vue官方说明文档+慕课视频+网络博客

总结：用ref进行引用命名，$refs是所有引用的名称，尤其注意循环中ref的使用（数组）。

在标签上面使用ref通过this.$refs.名字 获取到的是标签对应的DOM元素this.$refs.hello.innerHTML
在组件上面使用ref通过this.$refs.名字 获取到的是子组件的引用，可以使用组件的所有方法this.$refs.counter1.number,this.$refs.方法（）
如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组 。

若是通过 :ref =某变量 添加ref ,如果想获取该ref时需要加 [0]，如this.$refs[refsArrayItem] [0]；

如果不是:ref =某变量的方式而是 ref =某字符串时则不需要加，如this.$refs[refsArrayItem]。

注意：ref 需要在Dom渲染完成后才会有，在使用的时候确保Dom已经渲染完成。比如在生命周期 mounted钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。

        <div 
            ref='hello' 
            @click='handleDivClick'
        >
            hello world
        </div>

        var vm = new Vue({
            el: '#root',
            methods: {
                handleDivClick: function () {
                    alert(this.$refs.hello.innerHTML)//获取到DOM元素中的内容
                }
            }
        })

案例：计数器

    <div id='root1'>
        <counter ref='counter1' @change='handleChange'></counter>
        <counter ref='counter2' @change='handleChange'></counter>
        <div></div>
    </div>

 		Vue.component('counter',{
            template:'<div @click="handleClick"></div>',
            data:function(){
                return{
                    number:0
                }
            },
            methods:{
                handleClick:function(){
                    this.number++
             // 这里涉及到子组件向父组件传值的内容,用emit触发一个change事件,在父组件进行监听
                    this.$emit('change')
                }
            }
        })
        var vm = new Vue({
            el:'#root1',
            data:{
                total:0
            },
            methods:{
                handleChange:function(){
                    this.total=this.$refs.counter1.number + this.$refs.counter2.number
                }
            }
        })

ref和$refs的使用

ref和$refs的使用

CATALOG

FEATURED TAGS

FRIENDS