vue中使用ref获取dom对象

冷不防 2022-04-16 00:06 448阅读 0赞

**（1）在标签上绑定一个ref属性，该属性可以获得该标签的dom对象**

<div id="app">
            <div ref="hi" @click="say" class="demo" id="only">Hello World</div>
        </div>
        <script>
    
            var vm = new Vue({
                el: '#app',
                methods: {
                    say() {
                        console.log(this.$refs)
                    }
                }
            })
        </script>

结果：this.refs对象上有个hi对象，hi对象就是该标签的dom对象。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70][]

在组件中使用ref属性：

<div id="app">
            组件一的值：<counter ref="one" @change="sum"></counter>
            组件二的值：<counter ref="two" @change="sum"></counter>
            一和二的总和：<span>{
       {sumNumber}}</span>
        </div>
        <script>
            Vue.component('counter', {
                template: `<div @click="handle">{
       {number}}</div>`,
                data: function(){
                    return {
                        number: 0
                    }
                },
                methods: {
                    handle(){
                        this.number ++
                        this.$emit('change')
                    }              
                }
            })
            var vm = new Vue({
                el: '#app',
                data: {
                    sumNumber: 0
                },
                methods: {
                    sum() {
                        this.sumNumber = this.$refs.one.number + this.$refs.two.number
                    }
                }
            })
        </script>

结果：

![20181114171657194.png][]

**注意：this是Vue实例**

**（2）el属性是element的意思，可以用实例上的$mount方法代替**

var vm = new Vue({
                
                data: {
                    
                },
            })
            vm.$mount('#app');

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70]: /images/20220416/2c41ef8dabcb4cbea0c8b5ea8809c316.png
[20181114171657194.png]: /images/20220416/8f80964bf41c48beaff6642654463f21.png