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