1. 當前格子輸入後自動聚焦下一個小格子；
2. 最後一個格子時,blur失去焦點,輸入完畢;
3. 父元件內繫結自定義getBackInfo事件傳遞輸入值至父元件

具體實現

引入： import INPUTPASSWORD from "@/components/inputPassWord"
註冊元件：components: { INPUTPASSWORD },
html寫入標籤 ：<INPUTPASSWORD ref="pwComponent" @getBackInfo="backInfoForconnect" />
繫結getBackInfo事件：@getBackInfo="backInfoForconnect"
定義事件函式 backInfoForconnect
父元件呼叫元件事件：this.$refs['pwComponent'].clearAllNumber()
或者 setup()函式中 numberState['pwComponent'].clearAllNumber()

HTML

<template>
    <div class="input-box">
        <div class="sixNumber">
            <el-input
                class="itemInSix"
                type="password"
                ref="num1"
                @keyup="loseBlur('1')"
                v-model="num11"
            />
            <el-input
                class="itemInSix"
                type="password"
                @keyup="loseBlur('2')"
                v-model="num22"
                ref="num2"
            />
            <el-input
                class="itemInSix"
                type="password"
                @keyup="loseBlur('3')"
                v-model="num33"
                ref="num3"
            />
            <el-input
                class="itemInSix"
                type="password"
                @keyup="loseBlur('4')"
                v-model="num44"
                ref="num4"
            />
            <el-input
                class="itemInSix"
                @keyup="loseBlur('5')"
                type="password"
                v-model="num55"
                ref="num5"
            />
            <el-input
                class="itemInSix"
                @keyup="loseBlur('6')"
                type="password"
                v-model="num66"
                ref="num6"
            />
            <!-- 清空 -->
            <el-button @click="clearAllNumber">重置</el-button>
        </div>
    </div>
</template>

 Script

<script>
import { reactive, toRefs, computed } from "vue";

export default {
    props: ['data'],
    emits: {
        // 傳回父級資料
        getBackInfo: (value) => {
            return value;
        }
    },
    setup(props, content) {
        const numberState = reactive({
            // 呼叫父級繫結事件getBackInfo,返回長度為6的拼接值;
            getMemInfo() {
                content.emit("getBackInfo", numberState.pd);
            },
            pd: computed(() => {
                // 拼接輸入的所有小格子輸入為一個值;
                let pass = "" + (numberState.num11 ?? "") + (numberState.num22 ?? "") + (numberState.num33 ?? "") + (numberState.num44 ?? "") + (numberState.num55 ?? "") + (numberState.num66 ?? "");
                return pass;
            }),
            // ref繫結值
            num1: null,
            num2: null,
            num3: null,
            num4: null,
            num5: null,
            num6: null,
            // v-model值
            num11: undefined,
            num22: undefined,
            num33: undefined,
            num44: undefined,
            num55: undefined,
            num66: undefined,
            loseBlur(id) {
                // backspace刪除小格子內容為空白時
                if (!numberState["num" + id + id] && numberState["num" + id + id] !== 0) {
                    numberState["num" + id + id] = undefined;
                    return;
                }

                if (typeof numberState["num" + id + id] === 'string') {
                    //替換所有非數字為空
                    numberState["num" + id + id] = numberState["num" + id + id].replace(/\D/g,"");
                    numberState["num" + id + id] = numberState["num" + id + id].split("")[0] ? numberState["num" + id + id].split("")[0] : undefined;
                    goFocus();
                } else {
                    //替換所有非數字為空
                    numberState["num" + id + id] = (numberState["num" + id + id]).toString().replace(/\D/g,"");
                    numberState["num" + id + id] = (numberState["num" + id + id]).toString().split("")[0] ? (numberState["num" + id + id]).toString().split("")[0] : undefined;
                    goFocus();
                }
                function goFocus() {
                    // 空白不聚焦下一個
                    if(!numberState["num" + id + id]){
                        return false;
                    }
                    // 聚焦下一個
                    let number = null;
                    if (Number(id) < 6) {
                        number = Number(id) + 1;
                        let indexAA = "num" + number;
                        numberState[indexAA].focus();
                    } else {
                        number = 6;
                        let indexAA = "num" + number;
                        numberState[indexAA].blur();
                    }
                }
            },
            clearAllNumber() {
                numberState.num11 = undefined;
                numberState.num22 = undefined;
                numberState.num33 = undefined;
                numberState.num44 = undefined;
                numberState.num55 = undefined;
                numberState.num66 = undefined;
                numberState['num1'].focus();
            }
        })
        return {
            ...toRefs(numberState)
        }
    },
    watch: {
        pd: {
            // 小格子數值變更 同步傳遞數值到父元件;
            handler: function (val) {
                this.getMemInfo();
            }
        },
        // 如果父級傳來回顯密碼
        data: {
            handler: function (val) {
                if (val) {
                    let string = "";
                    if (typeof val === 'number') {
                        string = val.toString();
                    } else {
                        string = val;
                    }
                    let arr = string.split('');
                    arr.forEach((item, index) => {
                        this['num' + (index + 1) + (index + 1)] = Number(item);
                    })
                }
            }, immediate: true
        }
    },
    data() {
        return {
        };
    },
    methods: {

    },
    created() {

    }
}
</script>