vue composition api 訪問 原vue2中 this.$refs

<el-form class="user-form" ref="ruleFormRef" :model="userForm" status-icon :rules="rules">
    <el-form-item label="原密碼" prop="oldPass">
      <el-input type="password" v-model="userForm.oldPass" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="新密碼" prop="pass">
      <el-input type="password" v-model="userForm.pass" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="確認密碼" prop="checkPass">
      <el-input type="password" v-model="userForm.checkPass" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="changePassword('userForm')">修改密碼</el-button>
    </el-form-item>
  </el-form>

由於composition api采用函數組合方式編程，無法使用 this 訪問vue實例，故無法使用 this.$refs.ruleFormRef 訪問form表單。

 

可在 setup 中聲明一個具有相同 ruleFormRef 名稱的 ref ，初始化為 null ：

export default {
  setup(props) {
    // Refs
    const ruleFormRef= ref(null);

    // Hooks
    onMounted(() => {
      console.log("ruleFormRef: ", ruleFormRef.value);
    });

    return {
      ruleFormRef
    };
  }
};

現在你可以通過 ruleFormRef.value 訪問form表單。