Vue学习笔记之模板引用

1、添加模板引用

对DOM元素添加引用，语法格式<input ref="input">，则在DOM元素挂载成功后，可以通过this.$refs.input的语法形式访问引用的input元素。

2、v-for中的模板引用

对列表元素添加引用，语法格式<li v-for="item in list" ref="items"> {{ item }} </li>，则在DOM元素挂载成功后，可以通过this.$refs.items的语法形式访问所有的li元素。

3、函数模板引用

可以对DOM元素添加函数模板引用，则在组件每次更新时自动触发函数执行，语法格式<input :ref="testRef" />，模板函数在methods区域定义。

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
    <input ref="input" />
    <ul>
        <li v-for="item in list" ref="items">
            {{item}}
        </li>
    </ul>
    <input :ref="testRef" /><br/>
    <input :ref="(el)=>el" /><br />
    <button @click="list.push('hello')">Add</button>
</div>
<script>
    const { createApp } = Vue;
    createApp({
        data(){
            return {
                list:['西瓜','八宝粥','瓜子','123罩']
            }
        },
        methods: {
            testRef(el) {
                alert(el);
            }
        },
        mounted() {
            this.$refs.input.focus();
            this.$refs.input.value = 'hello';
            console.log(this.$refs.items);
        }
    }).mount('#app');
</script>