今天是第天，我想簡單分享一下ref()這個屬性

Vue的聲明式渲染可以提取出大部分DOM的操作，不過當我們需要訪問底層DOM元素時，可以使用ref。

ref是一種特殊屬性，它允許我們掛載之後對特定DOM屬性或子組件實例直接引用，引用的值會掛在到父組件$ref上。

ref用法

• 加在普通的元素上，用this.$refs.items取得的是DOM元素
• 加在子组件上，用this.$refs.items取得的是組件實例，可以使用组件的所有方法
• 使用v-for時，生成的 ref 值將是一個包含相應元素的數組

我用官方網站範例做例子，

這裡是HTML的部分

<div id="app">
    <ul>
        <li v-for ="item in list" ref="items">
            {{item}}
        </li>
    </ul>
</div>

這裡是JS的部分

<script>
    const app = {
    data(){
        return{
            list:[11,12,13] 
            }
        },
        mounted(){
            console.log(this.$refs.items)
            }
        }
    Vue.createApp(app).mount('#app')
</script>

執行結果

參考文件:

https://vuejs.org/guide/essentials/template-refs.html
https://zhuanlan.zhihu.com/p/50638655

ref()這個屬性就分享到這邊，我們第二十二天見。