跳至主內容區

XOOPS輕鬆架

:::

主內容區域

選擇後會自動跳轉頁面

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();

完整範例:

選擇後會自動跳轉頁面

:::

左邊區域內容

書籍目錄

展開 | 闔起

快速登入


右邊區域內容

請掃此 QR Code 可連至此頁面

計數器

今天: 4740474047404740
昨天: 3110311031103110
總計: 9478765947876594787659478765947876594787659478765

頁尾區域