模板指令-ref数组

在vue2中v-for绑定的$refs将会自动生成一个refs数组,但是在v-for中这种行为将会变得有歧义和不高效。

在vue3中,这种用法将不会被生效,因为vue3中不会自动生成refs数组,如果我们需要拿到多个的refs组成的数组,那么就需要使用函数的形式来手动绑定,也就是在vue3中v-for的ref需要绑定函数

在vue2中this.$refs得到的是一个数组

<body>
    <div id="app">
        <div v-for="(item,index) in list" :key="index" ref="setItemRef"></div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data(){
                return {
                    list:[1,2,3]
                }
            },
            mounted () {
                console.log(this.$refs.setItemRef)
            }
        })
    </script>
</body>

 模板指令-ref数组

 

 在vue3中执行以上的代码

<body>
    <div id="app">
        <div v-for="(item,index) in list" :key="index" ref="setItemRef">{{item}}</div>
    </div>
    <script>
        const{createApp}=Vue
        createApp({       
            data(){
                return {
                    list:[1,2,3]
                }
            },
            mounted () {
                console.log(this.$refs.setItemRef)
            }
        }).mount("#app")
    </script>
</body>

模板指令-ref数组

 

 vue3不会自动生成一个refs数组,只能得到最后一个元素的ref,如果我们需要在v-for中绑定ref并生成refs数组,则需要使用函数的方式来绑定

<body>
    <div id="app">
        <!-- ref绑定函数 -->
        <div v-for="(item,index) in list" :key="index" :ref="setItemRef">{{item}}</div>
    </div>
    <script>
        const{createApp,onMounted}=Vue      
        createApp({       
            setup(){
                let list=[1,2,3]
                let itemRefs=[]
                const setItemRef=(el)=>{
                    // el为每一个ref
                    console.log(el);
                    itemRefs.push(el)
                }
                onMounted (()=>{
                    console.log(itemRefs,'itemRefs')
                })
            return {list,setItemRef}
            }           
        }).mount("#app")
    </script>
</body>

模板指令-ref数组

 

上一篇:Vue+elementUI拓扑图管理-index.vue


下一篇:TypeError: Cannot read property ‘resetFields‘ of undefined解决方案