:::

8. Template Refs 模板引用

  1. 子元件:@/components/TemplateRef.vue
    <script>
    import { onMounted, ref } from "vue";
    export default {
      setup() {
        const txtInput = ref(null);
        onMounted(() => {
          txtInput.value.focus();
        });
        const num = ref(12345);
        return { txtInput, num };
      },
    };
    </script>
    
    <template>
      <input v-model="num" ref="txtInput" type="text" />
    </template>
    
    <style>
    </style>

     

  2. 設定一個 const txtInput = ref(null),然後在樣板中用 ref="txtInput" 綁定即可
  3. 如此,在 setup 裡面就可以取得被綁定的動元素,並做一些動作,例如取得焦點:txtInput.value.focus();

完整範例:


:::

書籍目錄

展開 | 闔起

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D33%26tbdsn%3D1742

計數器

今天: 2599259925992599
昨天: 3755375537553755
總計: 4458438445843844584384458438445843844584384458438